I got marker calling marker on a place Search along with grabbing its getDetails on google map v3. Inside of Place Search:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<style>
html, body, #map-canvas {
height: 100%;
margin: 0px;
padding: 0px;
width: 1500px;
margin-left: auto;
margin-right: auto;
}
</style>
<title>Places search box</title>
<script type='text/javascript' src='sortable/ext/jquery-1.9.1.js'></script>
<script type="text/javascript" src="sortable/ext/jquery-ui.js"></script>
<script src="http://ift.tt/1LzLlDy"></script>
<script>
var markers = [];
var map;
var marker;
function initialize() {
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
//CAN REVIEW FOR CURRENT LOCATION
var mapOptions = {
zoom: 8,
mapTypeId: 'roadmap'
};
var defaultBounds = new google.maps.LatLngBounds(
new google.maps.LatLng(0, 0));
map.fitBounds(defaultBounds);
// Create the search box and link it to the 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 for the event fired when the user selects an item from the
// pick list. Retrieve the matching places for that item.
google.maps.event.addListener(searchBox, 'places_changed', function() {
var places = searchBox.getPlaces();
//Taking input into array
var item = document.getElementById("pac-input");
if (places.length == 0) {
return;
}
//for (var i = 0, marker; marker = markers[i]; i++) {
google.maps.Map.prototype.clearMarkers = function() {
for (var i = 0; i < this.markers.length; i++) {
this.markers[i].setMap(null);
map.setZoom(8);
}
this.markers = new Array();
markers.length = 0;
}
// For each place, get the icon, place name, and location.
markers = [];
var bounds = new google.maps.LatLngBounds();
for (var i = 0, place; place = places[i]; i++) {
// Create a marker for each place.
var marker = new google.maps.Marker({
place_id: place.place_id
});
//Infowindow
var infowindow = new google.maps.InfoWindow({
//content: content
});
//Details Services
var request = {
placeId: marker.place_id
};
service = new google.maps.places.PlacesService(map);
service.getDetails(request, function(place, status) {
if (status == google.maps.places.PlacesServiceStatus.OK) {
var marker = new google.maps.Marker({
map: map,
position: place.geometry.location
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.setContent(place.name);
infowindow.open(map, this);
});
}
});
markers.push(marker);
//searchmarkers.push(marker);
bounds.extend(place.geometry.location);
}
map.fitBounds(bounds);
//map.fitBounds(places[0].geometry.viewport);
map.setZoom(12);
});
// [END region_getplaces]
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<input id="pac-input" class="controls" type="text" placeholder="Search Box">
<div id="map-canvas" class="dropit" style="float:left;width:70%;height:100%;"></div>
</body>
</html>
I didn't copy all the code so it looks a bit distorted. My issue is that everytime I do a place search, it'll work fine. BUT if I do additional place searches.. it'll stack. I can't seem to get rid of the existing markers from getDetails..
I removed markers.push(marker); and it is still somehow adding marker and cannot be removed.
Suggestions?
EDIT:
Updated the code. Please note that getDetails also shows a set of markers, and I cannot remove those. I removed markers thats originally from searchbox... but I needed the place_Id, so I kept it to use on getDetails.
Please help to remove all markers...
Aucun commentaire:
Enregistrer un commentaire