This code bellow works but when i delete(onclick) in the second phase doesn't. When I say second phase means...
1° Phase: Add 2 markers and click on both and the map set on null in ever instance.(clearOverlays function)
2° Phase (Doesn't Work!): When i do the same in the second time but the console shows: Cannot read property 'setMap' of undefined. (clearOverlays function)
The problem might be the count and id?
var map;
var markers = [];
var marker = 0;
var countmarkers = 0;
var count = 1;
function initMap() {
var myLatlng = {lat: -34.60842, lng: -58.381559100000004};
map = new google.maps.Map(document.getElementById('map'), {
zoom: 3,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROAD
});
// This event listener will call addMarker() when the map is clicked.
map.addListener('click', function(event) {
var clickLat = event.latLng.lat();
var clickLon = event.latLng.lng();
// show in input box
if(countmarkers == 1){
document.getElementById("lat2").value = clickLat.toFixed(5);
document.getElementById("lon2").value = clickLon.toFixed(5);
}else{
document.getElementById("lat").value = clickLat.toFixed(5);
document.getElementById("lon").value = clickLon.toFixed(5);
}
if(countmarkers == 2){
deleteMarkers();
}
//Add Marker
addMarker(event.latLng);
});
var input = /** @type {!HTMLInputElement}*/ (
document.getElementById('pac-input'));
var types = document.getElementById('type-selector');
map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);
map.controls[google.maps.ControlPosition.TOP_LEFT].push(types);
var autocomplete = new google.maps.places.Autocomplete(input);
autocomplete.bindTo('bounds', map);
var infowindow = new google.maps.InfoWindow();
var marker = new google.maps.Marker({
id:count,
map: map,
anchorPoint: new google.maps.Point(0, -29)
});
markers.push(marker);
autocomplete.addListener('place_changed', function() {
if(countmarkers == 2){
deleteMarkers();
}
infowindow.close();
marker.setVisible(false);
var place = autocomplete.getPlace();
if (!place.geometry) {
window.alert("Debe seleccionar una ubicacion");
//countmarkers = countmarkers - 1;
return false;
}
if (place.geometry.viewport) {
map.fitBounds(place.geometry.viewport);
map.setZoom(3);
} else {
map.setCenter(place.geometry.location);
map.setZoom(3);
}
if(countmarkers == 1){
document.getElementById("lat2").value = place.geometry.location.lat();
document.getElementById("lon2").value = place.geometry.location.lng();
}else{
document.getElementById("lat").value = place.geometry.location.lat();
document.getElementById("lon").value = place.geometry.location.lng();
}
addMarker(place.geometry.location);
marker.setPosition(place.geometry.location);
marker.setVisible(true);
var address = '';
if (place.address_components) {
address = [
(place.address_components[0] && place.address_components[0].short_name || ''),
(place.address_components[1] && place.address_components[1].short_name || ''),
(place.address_components[2] && place.address_components[2].short_name || '')
].join(' ');
}
infowindow.setContent('<div><strong>' + place.name + '</strong><br>' + address);
/*infowindow.open(map, marker);*/
});
// Sets a listener on a radio button to change the filter type on Places
// Autocomplete.
function setupClickListener(id, types) {
var radioButton = document.getElementById(id);
radioButton.addEventListener('click', function() {
autocomplete.setTypes(types);
});
}
setupClickListener('changetype-all', []);
setupClickListener('changetype-address', ['address']);
setupClickListener('changetype-establishment', ['establishment']);
setupClickListener('changetype-geocode', ['geocode']);
}
function clearOverlays(id) {
if(id == 1){
document.getElementById("lat").value = "";
document.getElementById("lon").value = "";
countmarkers = 0;
count= 1 ;
}else{
document.getElementById("lat2").value = "";
document.getElementById("lon2").value = "";
countmarkers = 1;
count= 2 ;
}
document.getElementById("countmarkers").value = countmarkers;
document.getElementById("count").value = count;
markers[id].setMap(null);
}
// Adds a marker to the map and push to the array.
function addMarker(location) {
var marker = new google.maps.Marker({
id:count,
position: location,
map: map
});
document.getElementById("countmarkers").value = countmarkers;
document.getElementById("count").value = count;
marker.addListener('click', function() {
var marker = this;
clearOverlays(this.id);
alert(this.id);
});
markers.push(marker);
countmarkers ++;
count ++;
}
// Sets the map on all markers in the array.
function setMapOnAll(map) {
for (var i = 0; i < markers.length; i++) {
markers[i].setMap(map);
}
count = 1;
}
// Removes the markers from the map, but keeps them in the array.
function clearMarkers() {
setMapOnAll(null);
}
// Shows any markers currently in the array.
function showMarkers() {
setMapOnAll(map);
}
// Deletes all markers in the array by removing references to them.
function deleteMarkers() {
clearMarkers();
markers = [];
countmarkers = 0;
}
Aucun commentaire:
Enregistrer un commentaire