Several custom Google Maps tokens

Question

So, I'm trying to learn how to make a google map. I have very little understanding of javascript, but I'm trying to find out here.

I referenced the code online, and I understood how I can understand how to add locations, a marker, and an info window, but I'm trying to figure out how to add a few custom icons for each marker.

Thanks for the help.

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], ['Sausalito', 37.8590937, -122.4852507], ['Sacramento', 38.5815719, -121.4943996], ['Soledad', 36.424687, -121.3263187], ['Shingletown', 40.4923784, -121.8891586] ]; //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, }); //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); 

Answer 1

There are several ways, the easiest way is to set the property of the marker icon in the URL of the image that you want to display as a marker.

Example:

 //modified array with icon-URLs 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'] ]; //inside the loop marker = new google.maps.Marker({ position: new google.maps.LatLng(locations[i][1], locations[i][2]), map: map, icon: locations[i][3] }); 

Answer 2

  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] ]; 

The location is an array of areas followed by their posicón, in particular in its latitude and longitude, so they will be placed on the google map, and latitude and longitude will not always be selected, so you can get a database or json. Hope I helped.

Answer 3

  <div id="map"></div> <script type="text/javascript"> function initialize() { //add map, the type of map var mapOptions = { zoom: 5, draggable: true, animation: google.maps.Animation.DROP, mapTypeId: google.maps.MapTypeId.ROADMAP, center: new google.maps.LatLng(51.4964302,-0.1331412), // area location styles:[{"stylers":[{"saturation":-100},{"gamma":1}]},{"elementType":"labels.text.stroke","stylers":[{"visibility":"off"}]},{"featureType":"poi.business","elementType":"labels.text","stylers":[{"visibility":"off"}]},{"featureType":"poi.business","elementType":"labels.icon","stylers":[{"visibility":"off"}]},{"featureType":"poi.place_of_worship","elementType":"labels.text","stylers":[{"visibility":"off"}]},{"featureType":"poi.place_of_worship","elementType":"labels.icon","stylers":[{"visibility":"off"}]},{"featureType":"road","elementType":"geometry","stylers":[{"visibility":"simplified"}]},{"featureType":"water","stylers":[{"visibility":"on"},{"saturation":50},{"gamma":0},{"hue":"#50a5d1"}]},{"featureType":"administrative.neighborhood","elementType":"labels.text.fill","stylers":[{"color":"#333333"}]},{"featureType":"road.local","elementType":"labels.text","stylers":[{"weight":0.5},{"color":"#333333"}]},{"featureType":"transit.station","elementType":"labels.icon","stylers":[{"gamma":1},{"saturation":50}]}] }; var mapElement = document.getElementById('map'); var map = new google.maps.Map(mapElement, mapOptions); //add locations var locations = [ ['London office', 51.4964302,-0.1331412,'http://labs.google.com/ridefinder/images/mm_20_red.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] }); //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); </script>