Polygon Snapping in Google Maps API V3

Work in Progress. Standby

by jordanarseno

HTML

<script src="https://maps.google.com/maps/api/js"></script>
<script src="http://underscorejs.org/underscore-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-alpha1/jquery.min.js"></script>
<script src="https://rawgit.com/jordanarseno/polysnapper/master/polysnapper.js"></script>
<div style='position:relative;'>
    <div id="map_div" style="height: 600px; width:100%;"></div>
    <div id='cp-wrap'></div>
</div>

<script id='control-panel' type='text/template'>
    <% if(drawing) { %>
        <button data-action='cancel' >cancel</button>
        <button data-action='query' >log poly</button>
    <% } else { %>
        <button data-action='new' >new poly</button>
    <% } %>
</script>

CSS

body {
  margin: 0;
  padding: 0;
  font: 12px sans-serif;
}
#cp-wrap{
    position: absolute;
    top: 10px;
    left:120px;
    background-color:white;
}

#cp-wrap button{
    font-size: 22px;
}

JavaScript

//the only global variable
//SM will become the SnapManager instance.
var SM = null;

google.maps.event.addDomListener(window, "load", function () {
  
  //we will center the map here
  var vancouver = {
      lat: 49.269858,
      lng: -123.137283
  }
  
  //granville island coordinates.
  //you should be fetching your coordinates from your server
  var granville_coords = [
        {lat: 49.27158485202591, lng: -123.13729763031006},
        {lat: 49.27277488695786, lng: -123.13691139221191},
        {lat: 49.27316689217891, lng: -123.13613891601562},
        {lat: 49.27319489243262, lng: -123.13474416732788},
        {lat: 49.27248088099777, lng: -123.13384294509888},
        {lat: 49.2696667352996,  lng: -123.13049554824829},
        {lat: 49.268546632648494,lng: -123.13055992126465},
        {lat: 49.268350612069995,lng: -123.13066720962524},
        {lat: 49.2684906268484,  lng: -123.13146114349365},
        {lat: 49.268546632648494,lng: -123.13249111175537},
        {lat: 49.26888266611402, lng: -123.13347816467285},
        {lat: 49.26889666745873, lng: -123.13401460647583},
        {lat: 49.2706328034105,  lng: -123.1368041038513 }
	];
    
  //coordinates of blocks just east of burrard.
  var burrard_coords = [
		{lat: 49.267972570183545, lng: -123.145751953125},
		{lat: 49.2679445669656,   lng: -123.14085960388184},
		{lat: 49.27032478374826,  lng: -123.14077377319336},
		{lat: 49.27138884351881,  lng: -123.14176082611084},
		{lat: 49.27309689147504,  lng: -123.14356327056885},
		{lat: 49.27267688516586,  lng: -123.14467906951904},
		{lat: 49.27152884967477,  lng: -123.14553737640381},
		{lat: 49.269834748503946, lng: -123.1459450721740}
  ];
  
  //make the satellite view google map, center it in Vancouver.
  map = new google.maps.Map(document.getElementById("map_div"), {
      
    center: new google.maps.LatLng(vancouver.lat, vancouver.lng),
    zoom: 16,
    mapTypeId: google.maps.MapTypeId.HYBRID
      
  });
  
  //this style is easier on the eyes...