Google map via API
By: Nesaratnam Sivanoly
Tags: Maps, Google Map Api, Google Maps Api, JavaScript

map with multiple pins

It's mandatory to have an API key to use gmap

Map Types

roadmap displays the default road map view. This is the default map type.

displays the default road map view. This is the default map type. satellite displays Google Earth satellite images.

displays Google Earth satellite images. hybrid displays a mixture of normal and satellite views.

displays a mixture of normal and satellite views. terrain displays a physical map based on terrain information.

Map Controls

The Zoom control displays “+” and “-” buttons for changing the zoom level of the map. This control appears by default in the bottom right corner of the map.

displays “+” and “-” buttons for changing the zoom level of the map. This control appears by default in the bottom right corner of the map. The Map Type control is available in a dropdown or horizontal button bar style, allowing the user to choose a map type ( ROADMAP , SATELLITE , HYBRID , or TERRAIN ). This control appears by default in the top left corner of the map.

is available in a dropdown or horizontal button bar style, allowing the user to choose a map type ( , , , or ). This control appears by default in the top left corner of the map. The Street View control contains a Pegman icon which can be dragged onto the map to enable Street View. This control appears by default near the bottom right of the map.

contains a Pegman icon which can be dragged onto the map to enable Street View. This control appears by default near the bottom right of the map. The Rotate control provides a combination of tilt and rotate options for maps containing oblique imagery. This control appears by default near the bottom right of the map. See 45° imagery for more information.

provides a combination of tilt and rotate options for maps containing oblique imagery. This control appears by default near the bottom right of the map. See 45° imagery for more information. The Scale control displays a map scale element. This control is disabled by default.

displays a map scale element. This control is disabled by default. The Fullscreen control offers the option to open the map in fullscreen mode. This control is enabled by default on desktop and mobile devices. Note: iOS doesn’t support the fullscreen feature. The fullscreen control is therefore not visible on iOS devices.

Add map

Map box place

<div id="map"></div>

initiate the map

var map = new google.maps.Map(document.getElementById('map'), {

zoom: 6,

center: new google.maps.LatLng(37.7749295, -122.4194155),

mapTypeId: google.maps.MapTypeId.ROADMAP

});

Add location

var locations = [

['San Francisco: Power Outage', 37.7749295, -122.4194155, 'http://labs.google.com/ridefinder/images/mm_20_purple.png'],

['Sausalito', 37.8590937, -122.4852507, 'http://labs.google.com/ridefinder/images/mm_20_red.png'],

['Sacramento', 38.5815719, -121.4943996, 'http://labs.google.com/ridefinder/images/mm_20_green.png'],

['Soledad', 36.424687, -121.3263187, 'http://labs.google.com/ridefinder/images/mm_20_blue.png'],

['Shingletown', 40.4923784, -121.8891586, 'http://labs.google.com/ridefinder/images/mm_20_yellow.png']

];

Add the markers

marker = new google.maps.Marker({

position: new google.maps.LatLng(locations[i][1], locations[i][2]),

map: map,

icon: locations[i][3]

});

Keep the map centered

google.maps.event.addListener(marker, 'click', function () {

map.setZoom(14);

map.panTo(this.getPosition());

});

Add click event to markers

google.maps.event.addListener(marker, 'click', (function (marker, i) {

return function () {

infowindow.setContent(locations[i][0]);

infowindow.open(map, marker);

}

})(marker, i));

Full script

function initialize() {



//add map, the type of map

var map = new google.maps.Map(document.getElementById('map'), {

zoom: 6,

center: new google.maps.LatLng(37.7749295, -122.4194155),

mapTypeId: google.maps.MapTypeId.ROADMAP

});



//add locations

var locations = [

['San Francisco: Power Outage', 37.7749295, -122.4194155, 'http://labs.google.com/ridefinder/images/mm_20_purple.png'],

['Sausalito', 37.8590937, -122.4852507, 'http://labs.google.com/ridefinder/images/mm_20_red.png'],

['Sacramento', 38.5815719, -121.4943996, 'http://labs.google.com/ridefinder/images/mm_20_green.png'],

['Soledad', 36.424687, -121.3263187, 'http://labs.google.com/ridefinder/images/mm_20_blue.png'],

['Shingletown', 40.4923784, -121.8891586, 'http://labs.google.com/ridefinder/images/mm_20_yellow.png']

];



//declare marker call it 'i'

var marker, i;



//declare infowindow

var infowindow = new google.maps.InfoWindow();



//add marker to each locations

for (i = 0; i < locations.length; i++) {

marker = new google.maps.Marker({

position: new google.maps.LatLng(locations[i][1], locations[i][2]),

map: map,

icon: locations[i][3]

});



google.maps.event.addListener(marker, 'click', function () {

map.setZoom(14);

map.panTo(this.getPosition());

});



//click function to marker, pops up infowindow

google.maps.event.addListener(marker, 'click', (function (marker, i) {

return function () {

infowindow.setContent(locations[i][0]);

infowindow.open(map, marker);

}

})(marker, i));

}

}



google.maps.event.addDomListener(window, 'load', initialize);

Example