samedi 28 février 2015

Adding multiple locations to google js map


I'm trying to add 3 locations to a Google map I have embedded in a website I am working on. Right now the map is working as intended with the single location pin. Is there a way to modify the js file to add the additional points?



// ========== START GOOGLE MAP ========== //
function initialize() {
var myLatLng = new google.maps.LatLng(30.227686, -81.386146);



var mapOptions = {
zoom: 14,
center: myLatLng,
disableDefaultUI: true,
scrollwheel: false,
navigationControl: false,
mapTypeControl: false,
scaleControl: false,
draggable: true,
mapTypeControlOptions: {
mapTypeIds: [google.maps.MapTypeId.ROADMAP, 'roadatlas']
}
};

var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);



var marker = new google.maps.Marker({
position: myLatLng,
map: map,
icon: 'img/location-icon.png',
title: '',
});

var contentString = '<div style="max-width: 300px" id="content">'+
'<div id="bodyContent">'+
'<h5 class="color-primary"><strong>Location 1</br> Ponte Vedra Office</strong></h5>' +
'<p style="font-size: 12px">103 B Solana Road </br>' +
'Ponte Vedra, FL 32082</br>' +
'Phone: 904-273-2717</p>'+
'</div>'+
'</div>';

var infowindow = new google.maps.InfoWindow({
content: contentString
});

google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker);
});

var styledMapOptions = {
name: 'US Road Atlas'
};

var usRoadMapType = new google.maps.StyledMapType(
roadAtlasStyles, styledMapOptions);

map.mapTypes.set('roadatlas', usRoadMapType);
map.setMapTypeId('roadatlas');
}

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






// ========== END GOOGLE MAP ========== //


I am trying to include these 3 latitude/longitude sets on my map: (30.227686, -81.386146) (30.650060, -81.455185) (30.056330, -81.535824)


Thanks!





Aucun commentaire:

Enregistrer un commentaire