javascript - Make a draggable rectangle appear with click of a button on google maps API -
i playing google maps api , trying make rectangle pop when user clicks button. working through examples given of api in use , came jsfiddle. not rectangle appear when button clicked. wanted appear @ center of users screen when click select region button.
here poorly patched together:
#map { width: 500px; height: 500px; center: true; }<!doctype html> <html> <head> <title>user-editable shapes</title> <meta name="viewport" content="initial-scale=1.0, user-scalable=no"> <meta charset="utf-8"> </head> <body> <div id="map"></div> <script> var map; var rectangle; var infowindow; var selectregion = null; var penang = {lat: 5.466277, lng: 100.289981}; /** * centercontrol adds control map recenters map on chicago. * constructor takes control div argument. * @constructor */ function centercontrol(controldiv, map) { // set css control border. var controlui = document.createelement('div'); controlui.style.backgroundcolor = '#fff'; controlui.style.border = '2px solid #fff'; controlui.style.borderradius = '3px'; controlui.style.boxshadow = '0 2px 6px rgba(0,0,0,.3)'; controlui.style.cursor = 'pointer'; controlui.style.marginbottom = '22px'; controlui.style.textalign = 'center'; controlui.title = 'click recenter map'; controldiv.appendchild(controlui); // set css control interior. var controltext = document.createelement('div'); controltext.style.color = 'rgb(25,25,25)'; controltext.style.fontfamily = 'roboto,arial,sans-serif'; controltext.style.fontsize = '16px'; controltext.style.lineheight = '38px'; controltext.style.paddingleft = '5px'; controltext.style.paddingright = '5px'; controltext.innerhtml = 'select region'; controlui.appendchild(controltext); // setup click event listeners: set map chicago. controlui.addeventlistener('click', function() { centerview = map.getcenter(); var bounds = new google.maps.latlngbounds( new google.maps.latlng(centerview.lat() - 0.1, centerview() + 0.1), new google.maps.latlng(centerview.lng() + 0.1, centerview() - 0.1) ); // define rectangle , set editable property true. rectangle = new google.maps.rectangle({ bounds: bounds, editable: true, draggable: true }); selectregion = 'map'; }); } function initmap() { map = new google.maps.map(document.getelementbyid('map'), { zoom: 15, center: penang }); // create div hold control , call centercontrol() constructor // passing in div. var centercontroldiv = document.createelement('div'); var centercontrol = new centercontrol(centercontroldiv, map); centercontroldiv.index = 1; map.controls[google.maps.controlposition.top_center].push(centercontroldiv); rectangle.setmap(selectregion); } </script> <script src="https://maps.googleapis.com/maps/api/js?&callback=initmap&signed_in=true" async defer> </script> </body> </html>
i have tried whit code. have find 2 problem
and error in
new google.maps.latlng(centerview.lat() - 0.1, centerview() + 0.1), new google.maps.latlng(centerview.lng() + 0.1, centerview() - 0.1) this correct 1
new google.maps.latlng(centerview.lat() - 0.001, centerview.lng() - 0.001), new google.maps.latlng(centerview.lat() + 0.001, centerview.lng() + 0.001) second rectangle in not visibile , assigned map
i have changed way
rectangle = new google.maps.rectangle({ bounds: bounds, editable: true, draggable: true, strokecolor: '#ff0000', strokeopacity: 0.8, strokeweight: 2, fillcolor: '#ff0000', fillopacity: 0.35, map: map, }); this full working code
<body> <div id="map"></div> <script> var map; var rectangle; var infowindow; var selectregion = null; var penang = {lat: 5.466277, lng: 100.289981}; /** * centercontrol adds control map recenters map on chicago. * constructor takes control div argument. * @constructor */ function centercontrol(controldiv, map) { // set css control border. var controlui = document.createelement('div'); controlui.style.backgroundcolor = '#fff'; controlui.style.border = '2px solid #fff'; controlui.style.borderradius = '3px'; controlui.style.boxshadow = '0 2px 6px rgba(0,0,0,.3)'; controlui.style.cursor = 'pointer'; controlui.style.marginbottom = '22px'; controlui.style.textalign = 'center'; controlui.title = 'click recenter map'; controldiv.appendchild(controlui); // set css control interior. var controltext = document.createelement('div'); controltext.style.color = 'rgb(25,25,25)'; controltext.style.fontfamily = 'roboto,arial,sans-serif'; controltext.style.fontsize = '16px'; controltext.style.lineheight = '38px'; controltext.style.paddingleft = '5px'; controltext.style.paddingright = '5px'; controltext.innerhtml = 'select region'; controlui.appendchild(controltext); // setup click event listeners: set map chicago. controlui.addeventlistener('click', function() { centerview = map.getcenter(); var bounds = new google.maps.latlngbounds( new google.maps.latlng(centerview.lat() - 0.001, centerview.lng() - 0.001), new google.maps.latlng(centerview.lat() + 0.001, centerview.lng() + 0.001) ); // define rectangle , set editable property true. rectangle = new google.maps.rectangle({ bounds: bounds, editable: true, draggable: true, strokecolor: '#ff0000', strokeopacity: 0.8, strokeweight: 2, fillcolor: '#ff0000', fillopacity: 0.35, map: map, }); selectregion = 'map'; }); } function initmap() { map = new google.maps.map(document.getelementbyid('map'), { zoom: 15, center: penang }); // create div hold control , call centercontrol() constructor // passing in div. var centercontroldiv = document.createelement('div'); var centercontrol = new centercontrol(centercontroldiv, map); centercontroldiv.index = 1; map.controls[google.maps.controlposition.top_center].push(centercontroldiv); //rectangle.setmap(selectregion); } </script> <script src="https://maps.googleapis.com/maps/api/js?&callback=initmap&signed_in=true" async defer> </script> </body>
Comments
Post a Comment