setMap() ist undefined

Question

Ich versuche, Marker aus der Karte zu löschen, die mit Google Map API erstellt wird. Es sieht so aus, als ob ich keine GM API verwende und diese Funktion ist undefiniert, sonst tue ich das. Was ist falsch? Können Sie mir dabei helfen, da dies das erste Mal ist, dass ich eine API verwende?

var myLatlng = new google.maps.LatLng(-34.397, 150.644); 
var mapOptions = { 
    zoom: 8, 
    center: myLatlng, 
    mapTypeId: google.maps.MapTypeId.ROADMAP 
}; 
var map = new google.maps.Map(document.getElementById("map"), mapOptions); 

function Point(index, latitude, longitude) { 
    this.index = index; 
    this.latitude = latitude; 
    this.longitude = longitude; 
} 

map.markers = []; 


function DeleteMarker(index) { 
    console.log(JSON.stringify(map.markers[index])); 
    map.markers[index].setMap(null); ///////PROBLEM IS HERE 
    map.markers[index] = null; 
    map.markers.splice(index, 1); 
} 

google.maps.event.addListener(map, 'click', function (event) { 
    placeMarker(event.latLng); 
}); 

function placeMarker(location) { 
    var marker = new google.maps.Marker({ 
     position: location, 
     animation: google.maps.Animation.DROP, 
     map: map 
    }); 
    var index = map.markers.length; 
    map.markers.push(new Point(map.markers.length, location.lat(), location.lng())); 
    console.log(JSON.stringify(map.markers.length)); 

    var infowindow = new google.maps.InfoWindow({ 
     content: '<p>Details:' 
      + '<p>Latitude:' + location.lat() + '</p>' 
      + '<p>Longitude:' + location.lng() + '</p>' + 
      '<button id ="btnDeleteMarker" onclick=DeleteMarker(\'' + index + '\')>Delete this stop</button>' 
    }); 

    marker.addListener('click', function() { 
     infowindow.open(map, marker); 
    }); 
} 

Answer 1

Ihr map.markers Array ist ein Array von Point Objekte, die keine .setMap Methode haben.

map.markers.push(new Point(map.markers.length, location.lat(), location.lng())); 

A google.maps.Marker Objekt würde eine setMap Methode. Das ist wahrscheinlich, was Sie in Ihr Array einfügen möchten.

proof of concept fiddle

var geocoder; 
 
var map; 
 

 
function initialize() { 
 
    var myLatlng = new google.maps.LatLng(-34.397, 150.644); 
 
    var mapOptions = { 
 
    zoom: 8, 
 
    center: myLatlng, 
 
    mapTypeId: google.maps.MapTypeId.ROADMAP 
 
    }; 
 
    map = new google.maps.Map(document.getElementById("map"), mapOptions); 
 
    map.markers = []; 
 
    google.maps.event.addListener(map, 'click', function(event) { 
 
    placeMarker(event.latLng); 
 
    }); 
 
} 
 
google.maps.event.addDomListener(window, "load", initialize); 
 

 

 
function Point(index, latitude, longitude) { 
 
    this.index = index; 
 
    this.latitude = latitude; 
 
    this.longitude = longitude; 
 
} 
 

 
function DeleteMarker(index) { 
 
    console.log("marker index=" + index); 
 
    map.markers[index].setMap(null); ///////PROBLEM IS HERE 
 
    map.markers[index] = null; 
 
    map.markers.splice(index, 1); 
 
} 
 

 

 

 
function placeMarker(location) { 
 
    var marker = new google.maps.Marker({ 
 
    position: location, 
 
    animation: google.maps.Animation.DROP, 
 
    map: map 
 
    }); 
 
    var index = map.markers.length; 
 
    map.markers.push(marker /* new Point(map.markers.length, location.lat(), location.lng())*/); 
 
    console.log(JSON.stringify(map.markers.length)); 
 

 
    var infowindow = new google.maps.InfoWindow({ 
 
    content: '<p>Details:' + '<p>Latitude:' + location.lat() + '</p>' + '<p>Longitude:' + location.lng() + '</p>' + 
 
     '<button id ="btnDeleteMarker" onclick=DeleteMarker(\'' + index + '\')>Delete this stop</button>' 
 
    }); 
 

 
    marker.addListener('click', function() { 
 
    infowindow.open(map, marker); 
 
    }); 
 
}

html, 
 
body, 
 
#map { 
 
    height: 100%; 
 
    width: 100%; 
 
    margin: 0px; 
 
    padding: 0px 
 
}

<script src="https://maps.googleapis.com/maps/api/js"></script> 
 
<div id="map"></div>