Post
Ask Question

Show Colorful markers on Google Map

JavaScript:  
  1. <script src="https://maps.googleapis.com/maps/api/js"></script>  
  2. <script>  
  3. var map;  
  4.   
  5. function initialize()  
  6. {  
  7.     var mapCanvas = document.getElementById('map');  
  8.     var mapOptions = {  
  9.         center: new google.maps.LatLng(44.5403, -78.5463),  
  10.         zoom: 8,  
  11.         mapTypeId: google.maps.MapTypeId.ROADMAP,  
  12.         draggable: true  
  13.     }  
  14.     map = new google.maps.Map(mapCanvas, mapOptions);  
  15.     AddMarker();  
  16. }  
  17. google.maps.event.addDomListener(window, 'load', initialize);  
  18.   
  19. function AddMarker()  
  20. {  
  21.     var marker1 = new google.maps.Marker(  
  22.     {  
  23.         position: new google.maps.LatLng(44.5403, -78.5463),  
  24.         map: map,  
  25.         icon: new google.maps.MarkerImage("http://maps.google.com/mapfiles/ms/icons/red.png")  
  26.     });  
  27.     var marker2 = new google.maps.Marker(  
  28.     {  
  29.         position: new google.maps.LatLng(44.4503, -78.5463),  
  30.         map: map,  
  31.         icon: new google.maps.MarkerImage("http://maps.google.com/mapfiles/ms/icons/green.png")  
  32.     });  
  33.     var marker3 = new google.maps.Marker(  
  34.     {  
  35.         position: new google.maps.LatLng(44.3803, -78.5463),  
  36.         map: map,  
  37.         icon: new google.maps.MarkerImage("http://maps.google.com/mapfiles/ms/icons/yellow.png")  
  38.     });  
  39. };  
  40. </script> HTML Body:  
  41.   
  42. <body>  
  43.     <div id="map"></div>  
  44. </body>