Google maps

tutorial: https://developers.google.com/maps/tutorials/fundamentals/adding-a-google-map

by amenadiel

HTML

<script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
    <div id="map-canvas"></div>

CSS

html, body, #map-canvas {
        height: 500px;
        width:960px;
        margin: 0px;
        padding: 0px
      }
      #markerLayer img {
        border: 2px solid red !important;
        width: 85% !important;
        height: 90% !important;
        border-radius: 5px;
      }

JavaScript

var map;

function initialize() {
        var mapOptions = {
            zoom: 9,
            center: new google.maps.LatLng(40.6, -74)
        };
      map = new google.maps.Map(document.getElementById('map-canvas'),    mapOptions);
 
     // I create 3 markers using http://ruralshores.com/assets/marker-icon.png as icon
     var myIcon='http://ruralshores.com/assets/marker-icon.png';
     var marker1 = new google.maps.Marker({ position: {lat:40.8, lng:-74}, map: map, icon: myIcon, optimized:false });
     var marker2 = new google.maps.Marker({ position: {lat:40.6, lng:-74.5}, map: map, icon: myIcon , optimized:false });
     var marker3 = new google.maps.Marker({ position: {lat:40.5, lng:-74.3}, map: map, icon: myIcon , optimized:false });

     // I create an OverlayView, and set it to add the "markerLayer" class to the markerLayer DIV
     var myoverlay = new google.maps.OverlayView();
     myoverlay.draw = function () {
         this.getPanes().markerLayer.id='markerLayer';
     };
     myoverlay.setMap(map);

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