Google map via API

Nesaratnam Sivanoly
Jun 16 · 3 min read
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.

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.

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