i'm having trouble google maps marker scripting. i've made when search location map brings view there , places marker (multiple can placed). can't figure out how keep markers there after refreshing page. tried work around using event (onclick) create marker user clicks (the markers makes when search different normal markers , can't saved using "savewidget" function api other "click markers" can). i've found many threads on stackoverflow meant create markers on click doesn't seem work me. can me out here?
heres code (html):
<!doctype html> <html> <head> <meta name="viewport" content="initial-scale=1.0, user-scalable=no"> <meta charset="utf-8"> <style> #map-canvas { width: 900px; height: 600px; } .controls { margin-top: 16px; border: 1px solid transparent; border-radius: 2px 0 0 2px; box-sizing: border-box; -moz-box-sizing: border-box; height: 32px; outline: none; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3); } #pac-input { background-color: #fff; font-family: roboto; font-size: 15px; font-weight: 300; margin-left: 12px; padding: 0 11px 0 13px; text-overflow: ellipsis; width: 400px; } #pac-input:focus { border-color: #4d90fe; } .pac-container { font-family: roboto; } #type-selector { color: #fff; background-color: #4d90fe; padding: 5px 11px 0px 11px; } #type-selector label { font-family: roboto; font-size: 13px; font-weight: 300; } </style> <title>places search box</title> <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true&libraries=places"></script> <script> // example adds search box map, using google place autocomplete // feature. people can enter geographical searches. search box return // pick list containing mix of places , predicted search terms. function initialize() { var markers = []; var map = new google.maps.map(document.getelementbyid('map-canvas'), { maptypeid: google.maps.maptypeid.roadmap }); var defaultbounds = new google.maps.latlngbounds( new google.maps.latlng(-33.8902, 151.1759), new google.maps.latlng(-33.8474, 151.2631)); map.fitbounds(defaultbounds); // create search box , link ui element. var input = /** @type {htmlinputelement} */( document.getelementbyid('pac-input')); map.controls[google.maps.controlposition.top_left].push(input); var searchbox = new google.maps.places.searchbox( /** @type {htmlinputelement} */(input)); // [start region_getplaces] // listen event fired when user selects item // pick list. retrieve matching places item. google.maps.event.addlistener(searchbox, 'places_changed', function() { var places = searchbox.getplaces(); if (places.length == 0) { return; } (var = 0, marker; marker = markers[i]; i++) { marker.setmap(null); } // each place, icon, place name, , location. markers = []; var bounds = new google.maps.latlngbounds(); (var = 0, place; place = places[i]; i++) { var image = { url: place.icon, size: new google.maps.size(71, 71), origin: new google.maps.point(0, 0), anchor: new google.maps.point(17, 34), scaledsize: new google.maps.size(25, 25) }; // create marker each place. var marker = new google.maps.marker({ map: map, icon: image, title: place.name, position: place.geometry.location }); markers.push(marker); bounds.extend(place.geometry.location); } map.fitbounds(bounds); }); // [end region_getplaces] // bias searchbox results towards places within bounds of // current map's viewport. google.maps.event.addlistener(map, 'bounds_changed', function() { var bounds = map.getbounds(); searchbox.setbounds(bounds); }); } google.maps.event.adddomlistener(window, 'load', initialize); </script> <style> #target { width: 345px; } </style> </head> <body> <input id="pac-input" class="controls" type="text" placeholder="search box"> <div id="map-canvas"></div> </body> </html>
you can try this:
google.maps.event.addlistener(map, 'click', function(event) { if (marker) { marker.setposition(event.latlng); } else { marker = new google.maps.marker({ position: event.latlng, map: map, title: 'new marker', draggable: false, }); } } 
Comments
Post a Comment