Generic Google Map Example with Markers

by LandsD Map API

HTML

<script src="&quot;https://maps.googleapis.com/maps/api/js?v=3&amp;amp;sensor=false"></script>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3&amp;sensor=false"></script>
<div id="map_div" style="height: 400px;"></div>

CSS

body {
  margin: 0;
  padding: 0;
  font: 12px sans-serif;
}
h1, p {
  margin: 0;
  padding: 0;
}

JavaScript

/*
 * declare map as a global variable
 */
var map;

/*
 * use google maps api built-in mechanism to attach dom events
 */
google.maps.event.addDomListener(window, "load", function () {

  /*
   * create map
   */
  var map = new google.maps.Map(document.getElementById("map_div"), {
    center: new google.maps.LatLng(22.29227, 114.20847),
    zoom: 15,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  });


	  var BuildingsLayer = new google.maps.ImageMapType({
    										getTileUrl: function(coord, zoom) {
        return "https://landsvm.cbpmshk.info/HKMapServiceBase/" + zoom + "/" + coord.y + "/" + coord.x + ".png";
    },
    tileSize: new google.maps.Size(256, 256),
    isPng: true
});

map.overlayMapTypes.push(BuildingsLayer);

  /*
   * create infowindow (which will be used by markers)
   */
  var infoWindow = new google.maps.InfoWindow();

  /*
   * marker creater function (acts as a closure for html parameter)
   */
  function createMarker(options, html) {
    var marker = new google.maps.Marker(options);
    if (html) {
      google.maps.event.addListener(marker, "click", function () {
        infoWindow.setContent(html);
        infoWindow.open(options.map, this);
      });
    }
    return marker;
  }

  /*
   * add markers to map
   */
  var marker2 = createMarker({
    position: new google.maps.LatLng(22.29227, 114.20847),
    map: map
  }, "<h3>Lands Department</h3><p>23/F North Point Government Offices</p>");
});