Google Map Markers Example

by Ben Clayton

HTML

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&amp;sensor=false"></script>
<script src="//googlemaps.github.io/js-marker-clusterer//src/markerclusterer.js"></script>
<div id="map-canvas1" class="mymaps"></div>
<div id="map-canvas2" class="mymaps"></div>

CSS

.mymaps {
  margin: 30px;
  height: 400px;
  width: 400px;
}

JavaScript

// Google Map Class documentation
// https://developers.google.com/maps/documentation/javascript/reference#Map

function mapobj() {
	this.gmap;
	this.markers = new Array;
  this.initialize = function(elem_id) {
    // Set up the map
    var el = document.getElementById(elem_id);
    var options = {
      'zoom': 12,
      'center': new google.maps.LatLng(50.855, 0.57),
      'mapTypeId': google.maps.MapTypeId.ROADMAP
    };

    this.gmap = new google.maps.Map(el, options);

    this.add_marker(
      new google.maps.LatLng(50.855, 0.57),
      "http://www.kbcarcentre.co.uk/images/brands/kia.png",
      "Hastings Info"
    );

  };
  
  this.add_marker = function(point, icon, title) {
    var marker = new google.maps.Marker({
      position: point,
      icon: icon,
      title: title
    });
    this.markers.push(marker); //keep all markers in an array
    marker.setAnimation(google.maps.Animation.DROP);
    marker.setMap(this.gmap); //set the map
  };

}

// map_1 and map_2 end up as globals so you can inspect them in the console.
// if you put 'var' in front they become local to the document ready function. 
map_1 = new mapobj();
map_1.initialize("map-canvas1");
map_2 = new mapobj();
map_2.initialize("map-canvas2");

map_2.add_marker(
      new google.maps.LatLng(50.86, 0.57),
      "http://www.kbcarcentre.co.uk/images/brands/ford.png",
      "Hastings Info 2nd"
    );