javascript - Workng Google Maps API I have it setup so that the user can add a selection rectangle to their screen. How can I only do this just once? -
basically want user able add 1 rectangluar selection map. right adds many want. tried adding making addselection equal noop. didn't me. thought that allow function execute once. anyway trying allow user add 1 rectangular selection map. wondering best path peruse be.
html, body { height: 100%; margin: 0; padding: 0; } #map { height: 100%; }
<body> <div id="map"></div> <script> var map; var rectangle; var infowindow; var penang = { lat: 5.466277, lng: 100.289981 }; /** * centercontrol adds control map recenters map on chicago. * constructor takes control div argument. * @constructor */ function noop() {} function addselection(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 make selection'; 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() { var centerview = map.getcenter(); var bounds = map.getbounds(); var hoach = bounds.getnortheast().lat(); var moach = bounds.getsouthwest().lat(); var dim = (hoach - moach) / 4; var selectionbounds = new google.maps.latlngbounds( new google.maps.latlng(centerview.lat() - dim, centerview.lng() - dim), new google.maps.latlng(centerview.lat() + dim, centerview.lng() + dim)); // define rectangle , set editable property true rectangle = new google.maps.rectangle({ bounds: selectionbounds, editable: true, draggable: true, strokecolor: '#ff0000', strokeopacity: 0.8, strokeweight: 2, fillcolor: '#ff0000', fillopacity: 0.35, map: map, }); }); addselection == noop; //why doesen't limit one? } function initmap() { map = new google.maps.map(document.getelementbyid('map'), { zoom: 15, pancontrol: true, center: penang }); // create div hold control , call centercontrol() constructor // passing in div. var selectioncontroldiv = document.createelement('div'); var selectioncontrol = new addselection(selectioncontroldiv, map); selectioncontroldiv.index = 1; map.controls[google.maps.controlposition.top_center].push(selectioncontroldiv); } </script> <script src="https://maps.googleapis.com/maps/api/js?&callback=initmap&signed_in=true" async defer> </script> </body>
making addselection
equal noop
useless, must remove click-listener.
but however, when need button once may remove button after click:
controlui.addeventlistener('click', function() { this.parentnode.removechild(this); //continue code...... });
Comments
Post a Comment