Created
May 10, 2015 09:14
-
-
Save beardyco/7544a40f811461d79647 to your computer and use it in GitHub Desktop.
Google Maps example // source http://jsbin.com/nuzemicuje
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <title>Google Maps example</title> | |
| <script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> | |
| <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> | |
| <style type="text/css"> | |
| html { height: 100% } | |
| body { height: 100%; margin: 0; padding: 0 } | |
| #map_canvas { height: 100% } | |
| </style> | |
| <script type="text/javascript" | |
| src="http://maps.googleapis.com/maps/api/js?sensor=false®ion=GB&libraries=drawing"> | |
| </script> | |
| </head> | |
| <body> | |
| <div id="map_canvas" style="width:100%; height:100%"></div> | |
| <script id="jsbin-javascript"> | |
| var G = google.maps; | |
| var zoom = 7; | |
| var centerPoint = new G.LatLng(45.5, -100.5); | |
| $(function() { | |
| // create options object | |
| var myOptions = { | |
| center: centerPoint, | |
| zoom: zoom, | |
| mapTypeId: G.MapTypeId.ROADMAP | |
| }; | |
| // create map with options | |
| var map = new G.Map($("#map_canvas")[0], myOptions); | |
| addPolygon(map); | |
| }); | |
| function addPolygon(map) { | |
| var paths = [ | |
| new G.LatLng(45, -100), | |
| new G.LatLng(45.5, -99.5), | |
| new G.LatLng(46, -100), | |
| new G.LatLng(46, -101), | |
| new G.LatLng(45, -101) | |
| ]; | |
| poly = new G.Polygon({ | |
| clickable: false, | |
| paths: paths, | |
| map: map | |
| }); | |
| poly.setEditable(true); | |
| addDeleteButton(poly, 'http://i.imgur.com/RUrKV.png'); | |
| } | |
| function addDeleteButton(poly, imageUrl) { | |
| var path = poly.getPath(); | |
| path["btnDeleteClickHandler"] = {}; | |
| path["btnDeleteImageUrl"] = imageUrl; | |
| google.maps.event.addListener(poly.getPath(), 'set_at', pointUpdated); | |
| google.maps.event.addListener(poly.getPath(), 'insert_at', pointUpdated); | |
| } | |
| function pointUpdated(index) { | |
| var path = this; | |
| var btnDelete = getDeleteButton(path.btnDeleteImageUrl); | |
| if (btnDelete.length === 0) { | |
| var undoimg = $("img[src$='http://maps.gstatic.com/mapfiles/undo_poly.png']"); | |
| undoimg.parent().css('height', '21px !important'); | |
| undoimg.parent().parent().append('<div style="overflow-x: hidden; overflow-y: hidden; position: absolute; width: 30px; height: 27px;top:21px;"><img src="' + path.btnDeleteImageUrl + '" class="deletePoly" style="height:auto; width:auto; position: absolute; left:0;"/></div>'); | |
| // now get that button back again! | |
| btnDelete = getDeleteButton(path.btnDeleteImageUrl); | |
| btnDelete.hover(function() { | |
| $(this).css('left', '-30px'); | |
| return false; | |
| }, | |
| function() { | |
| $(this).css('left', '0px'); | |
| return false; | |
| }); | |
| btnDelete.mousedown(function() { | |
| $(this).css('left', '-60px'); | |
| return false; | |
| }); | |
| } | |
| // if we've already attached a handler, remove it | |
| if (path.btnDeleteClickHandler) | |
| btnDelete.unbind('click', path.btnDeleteClickHandler); | |
| // now add a handler for removing the passed in index | |
| path.btnDeleteClickHandler = function() { | |
| path.removeAt(index); | |
| return false; | |
| }; | |
| btnDelete.click(path.btnDeleteClickHandler); | |
| } | |
| function getDeleteButton(imageUrl) { | |
| return $("img[src$='" + imageUrl + "']"); | |
| } | |
| </script> | |
| <script id="jsbin-source-javascript" type="text/javascript">var G = google.maps; | |
| var zoom = 7; | |
| var centerPoint = new G.LatLng(45.5, -100.5); | |
| $(function() { | |
| // create options object | |
| var myOptions = { | |
| center: centerPoint, | |
| zoom: zoom, | |
| mapTypeId: G.MapTypeId.ROADMAP | |
| }; | |
| // create map with options | |
| var map = new G.Map($("#map_canvas")[0], myOptions); | |
| addPolygon(map); | |
| }); | |
| function addPolygon(map) { | |
| var paths = [ | |
| new G.LatLng(45, -100), | |
| new G.LatLng(45.5, -99.5), | |
| new G.LatLng(46, -100), | |
| new G.LatLng(46, -101), | |
| new G.LatLng(45, -101) | |
| ]; | |
| poly = new G.Polygon({ | |
| clickable: false, | |
| paths: paths, | |
| map: map | |
| }); | |
| poly.setEditable(true); | |
| addDeleteButton(poly, 'http://i.imgur.com/RUrKV.png'); | |
| } | |
| function addDeleteButton(poly, imageUrl) { | |
| var path = poly.getPath(); | |
| path["btnDeleteClickHandler"] = {}; | |
| path["btnDeleteImageUrl"] = imageUrl; | |
| google.maps.event.addListener(poly.getPath(), 'set_at', pointUpdated); | |
| google.maps.event.addListener(poly.getPath(), 'insert_at', pointUpdated); | |
| } | |
| function pointUpdated(index) { | |
| var path = this; | |
| var btnDelete = getDeleteButton(path.btnDeleteImageUrl); | |
| if (btnDelete.length === 0) { | |
| var undoimg = $("img[src$='http://maps.gstatic.com/mapfiles/undo_poly.png']"); | |
| undoimg.parent().css('height', '21px !important'); | |
| undoimg.parent().parent().append('<div style="overflow-x: hidden; overflow-y: hidden; position: absolute; width: 30px; height: 27px;top:21px;"><img src="' + path.btnDeleteImageUrl + '" class="deletePoly" style="height:auto; width:auto; position: absolute; left:0;"/></div>'); | |
| // now get that button back again! | |
| btnDelete = getDeleteButton(path.btnDeleteImageUrl); | |
| btnDelete.hover(function() { | |
| $(this).css('left', '-30px'); | |
| return false; | |
| }, | |
| function() { | |
| $(this).css('left', '0px'); | |
| return false; | |
| }); | |
| btnDelete.mousedown(function() { | |
| $(this).css('left', '-60px'); | |
| return false; | |
| }); | |
| } | |
| // if we've already attached a handler, remove it | |
| if (path.btnDeleteClickHandler) | |
| btnDelete.unbind('click', path.btnDeleteClickHandler); | |
| // now add a handler for removing the passed in index | |
| path.btnDeleteClickHandler = function() { | |
| path.removeAt(index); | |
| return false; | |
| }; | |
| btnDelete.click(path.btnDeleteClickHandler); | |
| } | |
| function getDeleteButton(imageUrl) { | |
| return $("img[src$='" + imageUrl + "']"); | |
| }</script></body> | |
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| var G = google.maps; | |
| var zoom = 7; | |
| var centerPoint = new G.LatLng(45.5, -100.5); | |
| $(function() { | |
| // create options object | |
| var myOptions = { | |
| center: centerPoint, | |
| zoom: zoom, | |
| mapTypeId: G.MapTypeId.ROADMAP | |
| }; | |
| // create map with options | |
| var map = new G.Map($("#map_canvas")[0], myOptions); | |
| addPolygon(map); | |
| }); | |
| function addPolygon(map) { | |
| var paths = [ | |
| new G.LatLng(45, -100), | |
| new G.LatLng(45.5, -99.5), | |
| new G.LatLng(46, -100), | |
| new G.LatLng(46, -101), | |
| new G.LatLng(45, -101) | |
| ]; | |
| poly = new G.Polygon({ | |
| clickable: false, | |
| paths: paths, | |
| map: map | |
| }); | |
| poly.setEditable(true); | |
| addDeleteButton(poly, 'http://i.imgur.com/RUrKV.png'); | |
| } | |
| function addDeleteButton(poly, imageUrl) { | |
| var path = poly.getPath(); | |
| path["btnDeleteClickHandler"] = {}; | |
| path["btnDeleteImageUrl"] = imageUrl; | |
| google.maps.event.addListener(poly.getPath(), 'set_at', pointUpdated); | |
| google.maps.event.addListener(poly.getPath(), 'insert_at', pointUpdated); | |
| } | |
| function pointUpdated(index) { | |
| var path = this; | |
| var btnDelete = getDeleteButton(path.btnDeleteImageUrl); | |
| if (btnDelete.length === 0) { | |
| var undoimg = $("img[src$='http://maps.gstatic.com/mapfiles/undo_poly.png']"); | |
| undoimg.parent().css('height', '21px !important'); | |
| undoimg.parent().parent().append('<div style="overflow-x: hidden; overflow-y: hidden; position: absolute; width: 30px; height: 27px;top:21px;"><img src="' + path.btnDeleteImageUrl + '" class="deletePoly" style="height:auto; width:auto; position: absolute; left:0;"/></div>'); | |
| // now get that button back again! | |
| btnDelete = getDeleteButton(path.btnDeleteImageUrl); | |
| btnDelete.hover(function() { | |
| $(this).css('left', '-30px'); | |
| return false; | |
| }, | |
| function() { | |
| $(this).css('left', '0px'); | |
| return false; | |
| }); | |
| btnDelete.mousedown(function() { | |
| $(this).css('left', '-60px'); | |
| return false; | |
| }); | |
| } | |
| // if we've already attached a handler, remove it | |
| if (path.btnDeleteClickHandler) | |
| btnDelete.unbind('click', path.btnDeleteClickHandler); | |
| // now add a handler for removing the passed in index | |
| path.btnDeleteClickHandler = function() { | |
| path.removeAt(index); | |
| return false; | |
| }; | |
| btnDelete.click(path.btnDeleteClickHandler); | |
| } | |
| function getDeleteButton(imageUrl) { | |
| return $("img[src$='" + imageUrl + "']"); | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment