Currently trying to grasp the concept of creating a customized Google map. I have limited experience with javascript but I'm eager to learn.
I found some code online that helped me understand how to add locations, markers, and infowindows, but now I am struggling to figure out how to incorporate multiple custom icons for each marker.
Your assistance would be greatly appreciated.
function initialize() {
//add map, specify type
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
});
//define locations
var locations = [
['San Francisco: Power Outage', 37.7749295, -122.4194155],
['Sausalito', 37.8590937, -122.4852507],
['Sacramento', 38.5815719, -121.4943996],
['Soledad', 36.424687, -121.3263187],
['Shingletown', 40.4923784, -121.8891586]
];
//initialize marker as 'i'
var marker, i;
//declare infowindow
var infowindow = new google.maps.InfoWindow();
//add marker to each location
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,
});
//click event on marker, shows 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);