jquery - How to draw polygon on mouse click of google maps -
i trying draw polygon when user click on google map rather hardcoding it.
unable create .this code
function initmap() { var mapdiv = document.getelementbyid('map'); var mapoptions= { center: new google.maps.latlng( 23.09024, -90.417924), zoom: 7, maptypeid:google.maps.maptypeid.roadmap }; var map=new google.maps.map(mapdiv,mapoptions) google.maps.event.addlistener(map, 'click', function( event ){ var latitude=event.latlng.lat(); var longitude=event.latlng.lng(); var destinations=new google.maps.mvcarray(); destinations.push(new google.maps.latlng(latitude,longitude)); console.log(destinations) var polygonoptions={path:destinations,strokecolor:"#ff0000",fillcolor:"00ff00"}; var polygon=new google.maps.polygon(polygonoptions); polygon.setmap(map); }); } fiddle: https://jsfiddle.net/vl6qpn4w/4/
any sugesstion?
got solution:
<script> var poly; var map; function initmap() { map = new google.maps.map(document.getelementbyid('map'), { zoom: 7, center: {lat: 41.879, lng: -87.624} // center map on chicago, usa. }); poly = new google.maps.polyline({ strokecolor: '#00db00', strokeopacity: 1.0, strokeweight: 3, fillcolor: 'green', fillopacity: 0.05 }); poly.setmap(map); map.addlistener('click', addlatlng); } function addlatlng(event) {debugger var path = poly.getpath(); if(path.length==4){ var polygonoptions={path:path,strokecolor:"#00db00",fillcolor:"green"}; var polygon=new google.maps.polygon(polygonoptions); polygon.setmap(map); } path.push(event.latlng); var marker = new google.maps.marker({ position: event.latlng, title: '#' + path.getlength(), map: map }); } </script>
Comments
Post a Comment