mardi 20 septembre 2016

Cannot read property 'setMap' of undefined Google Map V3 [When I delete specific marker]

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