Seattle Web Design 
Google Map and Markers API
This tutorial shows you how to put Google Map on your website and set Markers on it. Also you will see how it animates markers. The fantastic point in this tutorial is, you can use dynamic html ( JavaScript ) to add elements to your web page (DOM).
HTML File:
<!doctype html>
<html>
<head>
<title>US Cities</title>
<meta charset='utf-8'>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
<script src='us_cities.js'></script>
<link rel='stylesheet' href='us_cities.css'>
</head>
<body>
<h1>US Cities</h1>
<div id='display'>
<div id='map_area'></div>
<form name='picker'>
Select the city to be displayed above.
<select name='city'>
<option value='sea'>Seattle</option>
<option value='sfo'>San Francisco</option>
<option value='den'>Denver</option>
<option value='atl'>Altanta</option>
<option value='bos'>Boston</option>
</select>
<input type='button' name='show' value='Show' >
<input type='button' name='clear' value='Clear'>
</form>
</div>
</body>
</html>
CSS:
body {
background-color: #CCC;
}
h1 {
text-align: center;
margin-left: -500px;
}
form {
margin-top: 10px;
text-align: center;
}
#map_area {
width: 750px;
height: 425px;
background-color: #CF3;
border: 2px #000 double;
margin-left: auto;
margin-right: auto;
}
JavaScript (js) File
var map;
function initialize() {
document.picker.show.onclick = setMarker;
document.picker.clear.onclick = remover;
var mapOptions = {
zoom: 4,
center: new google.maps.LatLng(38, -99)
};
map = new google.maps.Map(document.getElementById('map_area'),
mapOptions);
var option = document.createElement("option");
option.text="Orlando";
option.value="mco";
document.picker.city.appendChild(option);
var option1 = document.createElement("option");
option1.text="Chicago";
option1.value="cgx";
document.picker.city.appendChild(option1);
var option2 = document.createElement("option");
option2.text="San Diego";
option2.value="san";
document.picker.city.appendChild(option2);
var option3 = document.createElement("option");
option3.text="New York City";
option3.value="nyc";
document.picker.city.appendChild(option3);
var option4 = document.createElement("option");
option4.text="Los Angeles";
option4.value="la";
document.picker.city.appendChild(option4);
var btn = document.createElement("BUTTON");
var t = document.createTextNode("Clear All");
btn.appendChild(t);
btn.value="clearall";
document.picker.appendChild(btn);
document.picker.clearall.onclick = removeall;
}
google.maps.event.addDomListener(window, 'load', initialize);
function setMarker() {
var lat, lng;
var tooltip;
if ( document.picker.city.value == 'sea') {
lat = 47.609722222222224;
lng= -122.33305555555555;
seamarker = new google.maps.Marker({
map:map,
draggable:true,
animation: google.maps.Animation.DROP,
title: 'Seattle',
position: new google.maps.LatLng(lat, lng )
});
seamarker.sfoMap(map);
}
if ( document.picker.city.value == 'sfo') {
lat = 37.78333333333333;
lng= -122.41666666666667;
sfomarker = new google.maps.Marker({
map:map,
draggable:true,
animation: google.maps.Animation.DROP,
title: 'Seattle',
position: new google.maps.LatLng(lat, lng ),
});
sfomarker.setMap(map);
}
if ( document.picker.city.value == 'den') {
lat = 39.761944444444445;
lng= -104.88111111111111;
denmarker = new google.maps.Marker({
map:map,
draggable:true,
animation: google.maps.Animation.DROP,
title: 'Denver',
position: new google.maps.LatLng(lat, lng ),
});
denmarker.setMap(map);
}
if ( document.picker.city.value == 'atl') {
lat = 33.755;
lng= -84.39;
atlmarker = new google.maps.Marker({
map:map,
draggable:true,
animation: google.maps.Animation.DROP,
title: 'Atlanta',
position: new google.maps.LatLng(lat, lng ),
});
atlmarker.setMap(map);
}
if ( document.picker.city.value == 'bos') {
lat = 42.35805555555556;
lng= -71.06361111111111;
bosmarker = new google.maps.Marker({
map:map,
draggable:true,
animation: google.maps.Animation.DROP,
title: 'Boston',
position: new google.maps.LatLng(lat, lng ),
});
bosmarker.setMap(map);
}
if ( document.picker.city.value == 'mco') {
lat = 28.4158;
lng = -81.2989;
mcomarker = new google.maps.Marker({
map:map,
draggable:true,
animation: google.maps.Animation.DROP,
title: 'Orlando',
position: new google.maps.LatLng(lat, lng ),
});
mcomarker.setMap(map);
}
if ( document.picker.city.value == 'cgx') {
lat = 41.8369;
lng = -87.6847;
cgxmarker = new google.maps.Marker({
map:map,
draggable:true,
animation: google.maps.Animation.DROP,
title: 'Chicago',
position: new google.maps.LatLng(lat, lng ),
});
cgxmarker.setMap(map);
}
if ( document.picker.city.value == 'san') {
lat = 32.715;
lng = -117.1625;
sanmarker = new google.maps.Marker({
map:map,
draggable:true,
animation: google.maps.Animation.DROP,
title: 'San Diego',
position: new google.maps.LatLng(lat, lng ),
});
sanmarker.setMap(map);
}
if ( document.picker.city.value == 'nyc') {
lat = 40.7128;
lng = -74.0058;
nycmarker = new google.maps.Marker({
map:map,
draggable:true,
animation: google.maps.Animation.DROP,
title: 'New York City',
position: new google.maps.LatLng(lat, lng ),
});
nycmarker.setMap(map);
}
if ( document.picker.city.value == 'la') {
lat = 34.05;
lng = -118.25;
lamarker = new google.maps.Marker({
map:map,
draggable:true,
animation: google.maps.Animation.DROP,
title: 'Los Angeles',
position: new google.maps.LatLng(lat, lng ),
});
lamarker.setMap(map);
}
google.maps.event.addListener(marker, 'click', toggleBounce);
}
function remover () {
if ( document.picker.city.value == 'sea')
{
seamarker.setMap(null);
}
if ( document.picker.city.value == 'sfo')
{
sfomarker.setMap(null);
}
if ( document.picker.city.value == 'den')
{
denmarker.setMap(null);
}
if ( document.picker.city.value == 'atl')
{
atlmarker.setMap(null);
}
if ( document.picker.city.value == 'bos')
{
bosmarker.setMap(null);
}
if ( document.picker.city.value == 'mco')
{
mcomarker.setMap(null);
}
if ( document.picker.city.value == 'cgx')
{
cgxmarker.setMap(null);
}
if ( document.picker.city.value == 'san')
{
sanmarker.setMap(null);
}
if ( document.picker.city.value == 'nyc')
{
nycmarker.setMap(null);
}
if ( document.picker.city.value == 'la')
{
lamarker.setMap(null);
}
}
function removeall(){
location.reload();
}