//only one global variable
//SM will represent the SnapManager instance.
var SM = null;
google.maps.event.addDomListener(window, "load", function () {
//centering the map in Vancouver
var vancouver = {
lat: 49.269858,
lng: -123.137283
}
//coordinates for Granville Island.
//you should fetch these coordinates from your server
var granville_coords = [
// coordinates here...
];
//coordinates of blocks east of Burrard.
var burrard_coords = [
// coordinates here...
];
//creating a satellite view Google Map centered 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
});
//customizing the style of the polygons
var polystyle = {
strokeColor: '#BADA55',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#C0FFEE',
fillOpacity: 0.35
}
//options for Granville polygon.
var poly1_opts = $.extend({
paths: granville_coords,
map: map,
snapable: true
}, polystyle);
//options for Burrard polygon
var poly2_opts = $.extend({
paths: burrard_coords,
map: map
}, polystyle);
//creating the polygons
var granville = new google.maps.Polygon(poly1_opts);
var burrard = new google.maps.Polygon(poly2_opts);
/*
For demo purposes, let's put two Google Maps Polys into the polygon array.
In your application, populate this array with
all the polygons you want to snap to, likely retrieved from a database.
*/
polygons = [granville, burrard];
/*
Creating the SnapManager.
API details: http://stackoverflow.com/a/33338065/568884
Will move to GitHub soon.
*/
SM = PolySnapper({
map: map,
marker: new google.maps.Marker(),
threshold: 20,
keyRequired: false,
polygons: polygons,
polystyle: polystyle,
hidePOI: true,
onEnabled: function(){
console.log("enabled")
},
onDisabled: function(){
console.log("disabled")
}
});
...
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;
}
<script src="https://rawgit.com/jordanarseno/polysnapper/master/polysnapper.js"></script>
<script src="http://underscorejs.org/underscore-min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maps.google.com/maps/api/js?.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>