Generic Google Map Example with Markers

by Luiz Nogueira

HTML

<script type="text/javascript" src="http://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;

var w;
var h;
var r=0;
var ctx;
var canvas;
var cx;
var cy;
var offsetX;
var offsetY;
var canvasOffset;
var isDown = false;
var img = new Image();
/*
 * 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(33.808678, -117.918921),
    zoom: 14,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  });

  /*
   * 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 marker0 = createMarker({
    position: new google.maps.LatLng(33.808678, -117.918921),
    map: map,
    icon: "http://1.bp.blogspot.com/_GZzKwf6g1o8/S6xwK6CSghI/AAAAAAAAA98/_iA3r4Ehclk/s1600/marker-green.png"
  }, "<h1>Marker 0</h1><p>This is the home marker.</p>");

  var arrow = createMarker({
    position: new google.maps.LatLng(33.808678, -117.918921),
    map: map,
    icon: "http://inaconsultoria.com.br/teste/arrow.png"
  });


/* 		canvas = $("#map_div").get(0);
		    ctx = canvas.getContext("2d");
		
		    canvasOffset = $("#map_div").offset();
		    offsetX = canvasOffset.left;
		    offsetY = canvasOffset.top;
		    cx = canvas.width/2;
		    cy = canvas.height/2;
		
		    img.onload = function(){
		      w = img.width/1.3;
		      h = img.height/1.3;
		
		      draw(ctx);
		    }
		
		    img.src  = 'http://inaconsultoria.com.br/teste/arrow.png?s';
		 */
	var marker1 = createMarker({
...