Karan Joisher Karan Joisher - 6 months ago 22
HTML Question

Why aren't Markers getting displayed on google map?

addMarkers
function adds a new
Marker object
to
markers
array after every 200ms.However markers aren't getting displayed and am getting no error messages either.They are displayed only when I shift the entire logic of
addMarkers
within
initMap
.

here is the 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

You need to call setMap after creating the marker:

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);
}

From Google's documentation:

[...] the marker is placed on the map at construction of the marker using the map property in the marker options. Alternatively, you can add the marker to the map directly by using the marker's setMap() method [...]

Comments