Generic Google Map Example with Markers

by nnur ffarazi

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>

   <canvas id="canvas" width=300 height=300></canvas>

CSS

body {
  margin: 0;
  padding: 0;
  font: 12px sans-serif;
}
h1, p {
  margin: 0;
  padding: 0;
}
#canvas {
  -webkit-transform: rotate(90deg); 
  -moz-transform:    rotate(90deg); 
  -ms-transform:     rotate(90deg); 
  -o-transform:      rotate(90deg);  
}

JavaScript

/*
 * declare map as a global variable
 */
var map;
var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var marker;
var angleInDegrees=0;
//var tiles = [ ];



/*
 * 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) {
     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
   */
   marker = createMarker({
       id:marker,
    position: new google.maps.LatLng(33.808678, -117.918921),
    map: map,
    icon: "https://agdvts2.s3.amazonaws.com/%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20563048815583cde906423e61%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20/car1.png"
  }, "<h1>Marker 0</h1><p>This is the home marker.</p>");
 marker.onload=function(){
    ctx.drawImage(marker,canvas.width/2-marker.width/2,canvas.height/2-marker.width/2);
}
 drawRotated();
 function drawRotated(degrees){
    
    canvas.translate(canvas.width/2,canvas.height/2);
    canvas.rotate(45);
     //ctx.drawImage(icon,-icon.width/2,-icon.width/2);
 
}

console.log("moved");

});



$("#map_div").click(function(){ 
    angleInDegrees= 45;
    drawRotated(angleInDegrees);
});