Warum werden Marker nicht auf Google Maps angezeigt?

Question

addMarkers Funktion fügt einen neuen Marker object-markers Array nach jedem 200ms.However Markierungen werden nicht angezeigt bekommen und bin immer keine Fehlermeldungen either.They nur angezeigt werden, wenn ich die gesamte Logik der addMarkers innerhalb initMap verschieben.

hier ist der JS-Code:

var markers=[]; 

var polyline; 
var animation_time = 3000 //in milliseconds 
var polylineIndex = 0;//Used for animation 
var path;//will contain DirectionResult.routes[0].overview_path 
var map;//Map Object 
var directionsService; 

var vehicle = { 
    id:15, 
    coords:[{ 
    latitude:19.075267, 
    longitude:72.905104, 
    timestamp:"1:00 PM" 
    },{ 
    latitude:19.068223, 
    longitude:72.899730, 
    timestamp:"1:20 PM" 
    }, 
    { 
    latitude:19.065803, 
    longitude:72.889966, 
    timestamp:"1:40 PM" 
    },{ 
    latitude:19.069554, 
    longitude:72.891981, 
    timestamp:"2:00 PM" 
    }] 
}; 



function initMap() { 
    //Set up directions service 
    directionsService = new google.maps.DirectionsService(); 

    //Map zooming and centering 
    var mapOptions = { 
    zoom: 15, 
    center: new google.maps.LatLng(19.069399, 72.897750) } 

    //Bind map to the HTML div element 
    var map = new google.maps.Map(document.getElementById("map"), mapOptions); 






    //Polyline settings 
    polyline = new google.maps.Polyline({ 
    geodesic: true, 
    strokeColor: '#0000ff', 
    strokeOpacity: 1.0, 
    strokeWeight: 5 
    }); 

    //Bind polyline to map 
    polyline.setMap(map); 

    //Initiate request for path 
    getPath(); 
}; 

function getPath(){ 
    //Create request object to send to directions service 
    var req = { 
    origin: new google.maps.LatLng(vehicle.coords[0].latitude,vehicle.coords[0].longitude), 
    destination: new google.maps.LatLng(vehicle.coords[vehicle.coords.length - 1].latitude,vehicle.coords[vehicle.coords.length - 1].longitude), 
    travelMode:google.maps.TravelMode.DRIVING, 

    }; 
    req.waypoints = []; 
    for(var i = 1;i< vehicle.coords.length - 1;i++){ 
    req.waypoints[i-1] = { 
     location:new google.maps.LatLng(vehicle.coords[i].latitude,vehicle.coords[i].longitude), 
     stopover:false 
    } 
    } 

    //send the request to directions service 
    directionsService.route(req, function(result, status) { 
    //Plot the lines 

    plotPath(result.routes); 

    }); 
}; 

function plotPath(routes){ 

    //path has coordinates for all lines 
    path = routes[0].overview_path; 
    //set timer to add a new coordinate to polylines path,hence display a new line 

    var drawTimer = window.setInterval(function(){ 
    //add till we have added all coordinated 
    if(polylineIndex < path.length){ 
     polyline.getPath().push(path[polylineIndex]/*.toJSON()*/); 
     polylineIndex++; 

    } 
    else{ 
     addMarkers(vehicle.coords); 
     window.clearInterval(drawTimer); 
    } 
    },animation_time/path.length); 

}; 


function addMarkers(coords){ 
    var i = 0; 
    var timer = window.setInterval(function(){ 
    //console.log(markers); 
    //console.log(vehicle.coords[i]); 
    if(i < coords.length){ 
    markers.push(new google.maps.Marker({ 
    animation: google.maps.Animation.DROP, 
    position: {lat:coords[i].latitude,lng:coords[i].longitude}, 
    })); 
    i++;} 
    else{ 
    window.clearInterval(timer); 
    } 

    },200); 

}; 

Answer 1

Sie müssen setMap aufzurufen, nachdem die Markierung zu erstellen:

function addMarkers(coords){ 
    var i = 0; 
    var timer = window.setInterval(function() { 
     if (i < coords.length) { 
      var marker = new google.maps.Marker({ 
       animation: google.maps.Animation.DROP, 
       position: {lat:coords[i].latitude,lng:coords[i].longitude}, 
      }); 
      markers.push(marker); 
      marker.setMap(/* your map reference */); 
      i++; 
     } else { 
      window.clearInterval(timer); 
     } 
    }, 200); 
} 

Von Google's documentation:

[...] die Markierung wird bei der Erstellung des Markers unter Verwendung der Eigenschaft map in den Markierungsoptionen auf der Karte platziert. Alternativ können Sie die Markierung auf der Karte unter Verwendung der der Markierung setMap() Methode direkt hinzufügen [...]

Answer 2

Die map Variable Sie ist lokal auf dem initMap Funktion initialisiert wird, wird die globale Version nie initialisiert. Sie müssen die Map-Variable auch zum Marker hinzufügen, wenn Sie sie erstellen.

Entfernen Sie die var von vor der Initialisierung in initMap

Wechsel:

var map; 
function initMap() { 
    //Set up directions service 
    directionsService = new google.maps.DirectionsService(); 

    //Map zooming and centering 
    var mapOptions = { 
    zoom: 15, 
    center: new google.maps.LatLng(19.069399, 72.897750) } 

    //Bind map to the HTML div element 
    var map = new google.maps.Map(document.getElementById("map"), mapOptions); 

An:

var map; 
function initMap() { 
    //Set up directions service 
    directionsService = new google.maps.DirectionsService(); 

    //Map zooming and centering 
    var mapOptions = { 
    zoom: 15, 
    center: new google.maps.LatLng(19.069399, 72.897750) } 

    //Bind map to the HTML div element 
    map = new google.maps.Map(document.getElementById("map"), mapOptions); 

Fügen Sie die map Referenz in der MarkerOptions:

 markers.push(new google.maps.Marker({ 
     animation: google.maps.Animation.DROP, 
     position: { 
      lat: coords[i].latitude, 
      lng: coords[i].longitude 
     }, 
     map: map 
     })); 

proof of concept fiddle

Code-Schnipsel:

var markers = []; 
 

 
var polyline; 
 
var animation_time = 3000 //in milliseconds 
 
var polylineIndex = 0; //Used for animation 
 
var path; //will contain DirectionResult.routes[0].overview_path 
 
var map; //Map Object 
 
var directionsService; 
 

 
var vehicle = { 
 
    id: 15, 
 
    coords: [{ 
 
    latitude: 19.075267, 
 
    longitude: 72.905104, 
 
    timestamp: "1:00 PM" 
 
    }, { 
 
    latitude: 19.068223, 
 
    longitude: 72.899730, 
 
    timestamp: "1:20 PM" 
 
    }, { 
 
    latitude: 19.065803, 
 
    longitude: 72.889966, 
 
    timestamp: "1:40 PM" 
 
    }, { 
 
    latitude: 19.069554, 
 
    longitude: 72.891981, 
 
    timestamp: "2:00 PM" 
 
    }] 
 
}; 
 

 
function initMap() { 
 
    //Set up directions service 
 
    directionsService = new google.maps.DirectionsService(); 
 

 
    //Map zooming and centering 
 
    var mapOptions = { 
 
    zoom: 15, 
 
    center: new google.maps.LatLng(19.069399, 72.897750) 
 
    } 
 

 
    //Bind map to the HTML div element 
 
    map = new google.maps.Map(document.getElementById("map"), mapOptions); 
 

 
    //Polyline settings 
 
    polyline = new google.maps.Polyline({ 
 
    geodesic: true, 
 
    strokeColor: '#0000ff', 
 
    strokeOpacity: 1.0, 
 
    strokeWeight: 5 
 
    }); 
 

 
    //Bind polyline to map 
 
    polyline.setMap(map); 
 

 
    //Initiate request for path 
 
    getPath(); 
 
}; 
 

 
function getPath() { 
 
    //Create request object to send to directions service 
 
    var req = { 
 
    origin: new google.maps.LatLng(vehicle.coords[0].latitude, vehicle.coords[0].longitude), 
 
    destination: new google.maps.LatLng(vehicle.coords[vehicle.coords.length - 1].latitude, vehicle.coords[vehicle.coords.length - 1].longitude), 
 
    travelMode: google.maps.TravelMode.DRIVING, 
 

 
    }; 
 
    req.waypoints = []; 
 
    for (var i = 1; i < vehicle.coords.length - 1; i++) { 
 
    req.waypoints[i - 1] = { 
 
     location: new google.maps.LatLng(vehicle.coords[i].latitude, vehicle.coords[i].longitude), 
 
     stopover: false 
 
    } 
 
    } 
 

 
    //send the request to directions service 
 
    directionsService.route(req, function(result, status) { 
 
    //Plot the lines 
 

 
    plotPath(result.routes); 
 

 
    }); 
 
}; 
 

 
function plotPath(routes) { 
 

 
    //path has coordinates for all lines 
 
    path = routes[0].overview_path; 
 
    //set timer to add a new coordinate to polylines path,hence display a new line 
 

 
    var drawTimer = window.setInterval(function() { 
 
    //add till we have added all coordinated 
 
    if (polylineIndex < path.length) { 
 
     polyline.getPath().push(path[polylineIndex] /*.toJSON()*/); 
 
     polylineIndex++; 
 

 
    } else { 
 
     addMarkers(vehicle.coords); 
 
     window.clearInterval(drawTimer); 
 
    } 
 
    }, animation_time/path.length); 
 

 
}; 
 

 

 
function addMarkers(coords) { 
 
    var i = 0; 
 
    var timer = window.setInterval(function() { 
 
    //console.log(markers); 
 
    //console.log(vehicle.coords[i]); 
 
    if (i < coords.length) { 
 
     markers.push(new google.maps.Marker({ 
 
     animation: google.maps.Animation.DROP, 
 
     position: { 
 
      lat: coords[i].latitude, 
 
      lng: coords[i].longitude 
 
     }, 
 
     map: map 
 
     })); 
 
     i++; 
 
    } else { 
 
     window.clearInterval(timer); 
 
    } 
 

 
    }, 200); 
 

 
}; 
 
google.maps.event.addDomListener(window, "load", initMap);

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>