Gmaps

gmaps

HTML

<script src="https://maps.google.com/maps/api/js"></script>
<body onload="init()">
<div id="map" style="height:600px; width:500px;">
</div>
</body>

JavaScript

function init()
{
	var myLatLng = new google.maps.LatLng(28.617161,-77.208111);
  var orlando = new google.maps.LatLng(28.53750,-81.37890);
  var map = new google.maps.Map(document.getElementById("map"),
  {
		zoom: 5,
    center: myLatLng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  }
  );
/*
    var marker = new google.maps.Marker(
    {
        position: myLatLng,
        map: map,
        title: 'Rajya Sabha'
    });
		marker.setDraggable(true);
		google.maps.event.addDomListener(marker, "drag", function(event) {			
			console.log("move");
		}); */


  var overlay = new CustomMarker(
		new google.maps.LatLng(28.53750,-81.37890), 
		map,
		{
			markerId: 1234
		}
	);
  
	var overlay2 = new CustomMarker(
		myLatLng, 
		map,
		{
			markerId: 123
		}
	);

  /*
   // Define the LatLng coordinates for the polygon's path.
  var triangleCoords = [
    {lat: 25.774, lng: -80.190},
    {lat: 18.466, lng: -66.118},
    {lat: 32.321, lng: -64.757},
    {lat: 25.774, lng: -80.190}
  ];

  // Construct the polygon.
  var bermudaTriangle = new google.maps.Polygon({
    paths: triangleCoords,
    strokeColor: '#FF0000',
    strokeOpacity: 0.8,
    strokeWeight: 2,
    fillColor: '#FF0000',
    fillOpacity: 0.35
  });
  bermudaTriangle.addListener("click", function(event) {
  alert("click triangle");
  }
  );
  bermudaTriangle.setMap(map);
*/
}

function CustomMarker(latlng, map, args) {
	this.latlng = latlng;	
	this.args = args;	
	this.setMap(map);
  this.zIndex = this.args.markerId%10;
  var overlayOpacity = new CustomOpacity(
  	this,
  	latlng,
  	map,
    {
    	markerId: this.args.markerId
    }
  );
}
    
function CustomOpacity(marker, latlng, map, args) {
	this.marker = marker;
	this.latlng = latlng;	
	this.args = args;	
  this.zIndex = this.args.markerId%10;
	this.setMap(map);
}
    
CustomMarker.prototype = new google.maps.OverlayView();
CustomOpacity.prototype = new google.maps.OverlayView();

CustomMarker.prototype.onAdd = function() {
	var self = this;
	
	var...