I've been trying to get the code working for hours. It seems to me that everything is ok, but it doesn't work. The markers keep showing up at the same time.
I'd really appreciate if you could point out my mistakes. Thanks in advance!
function dropMarker(data){
var marker = new google.maps.Marker({
position: new google.maps.LatLng(lat, lng),
map: map,
title: data.name,
animation: google.maps.Animation.DROP
});
markers.push(marker);
google.maps.event.addListener(marker, 'click', function() {
showIW(this);
});
}
function placeAllMarkers(data){
clearMarkers();
for(var i=0;i<data.length;i++){
setTimeout(dropMarker(data[i]),100*i);
}
}
You have to pass a function to setTimeout not call the function in it. Try
function placeAllMarkers(data){
clearMarkers();
for(var i=0;i<data.length;i++){
setTimeout((function(i){return function(){dropMarker(data[i])};})(i),100*i);
}
}
Related
Good evening,
I used the Google Maps API to add dynamically (for loop) 5 markers and infoboxes to a map. Now I want to set the listeners dynamically, I got the following code:
for(var i in partnerschools){
infoContent = 'BLABLA';
info = new google.maps.InfoWindow({
content: infoContent,
maxWidth: 230
});
infos.push(info);
var marker = new google.maps.Marker({
position: partnerschools[i].coordinates,
map: map,
animation: google.maps.Animation.DROP,
title: partnerschools[i].title,
});
markers.push(marker);
markers[i].addListener('click', function(){
infos[i].open(map, markers[i]);
});
}
The problem is that its always the same infobox that opens after clicking on one of these markers. Everything works really good until I try to add listeners to every marker, what am I doing wrong?
Solved
var addListener = function (i) {
google.maps.event.addListener(markers[i], 'click', function(){
infos[i].open(map, markers[i]);
});
}
addListener(i);
Have problem with marker adding.
var marker = new google.maps.Marker({
position: myLatlng,
title:"Hello World!"
});
// To add the marker to the map, call setMap();
marker.setMap(map);
https://jsfiddle.net/73ogq84a/
Simple example, each seconds I put marker, page not reloading, but reloading some layout and we see effect of map reload.
It is possible to do that put marker smoothly.
But on this page http://www.flightradar24.com/simple_index.php all working fine, planes are flying and no effect of map reload.
Make the marker and map global. Don't recreate the map every time, just move the marker.
var map, marker, myLatlng;
setInterval(function () {
if (!marker || !marker.setPosition) {
marker = new google.maps.Marker({
position: myLatlng,
title: "Hello World!"
});
// To add the marker to the map, call setMap();
marker.setMap(map);
} else {
marker.setPosition(myLatlng);
}
}, 5000);
updated fiddle
Provide map property when you create marker:
function placeMarker(location) {
var marker = new google.maps.Marker({
position: location,
map: map,
title:"Hello World!"
});
This question already has answers here:
Google Maps JS API v3 - Simple Multiple Marker Example
(15 answers)
Closed 8 years ago.
Problem with the following code is that the click event is not fired. The markers appear on the map as expected, but when clicked, nothing appears in the console. I've been searching for a while now, but all the answers I find are not relevant to my code.
/*
* Connect to Google API, load map and markers
*/
function drawMarkers(markerInfo) {
var mapOptions = {
center: { lat: 50.601079, lng: 4.4764595},
zoom: 8,
scrollwheel: false,
styles: style
};
var map = new google.maps.Map(document.getElementById('map-canvas'),mapOptions);
for (var i = 0; i < markerInfo.length; i++) {
var Latlng = new google.maps.LatLng(markerInfo[i][0],markerInfo[i][1]);
var title = markerInfo[i][2];
var marker = new google.maps.Marker({
position: Latlng,
animation: google.maps.Animation.DROP,
map: map,
title:title,
icon: markerUrl
});
};
google.maps.event.addListener(marker, 'click', function() {
console.log('test');
});
};
google.maps.event.addDomListener(window, 'load', getmarkerInfo);
I've got no idea what the problem could be, because there are no errors, and I can't seem to find the problem...
EDIT: When I refresh the page and I zoom out, so a marker which wasn't visible yet get's loaded in, only that one responds to the click event.
You only add the listener to the last marker, attach the listener in the loop and you'll be attaching the event to each marker.
for (var i = 0; i < markerInfo.length; i++) {
var Latlng = new google.maps.LatLng(markerInfo[i][0],markerInfo[i][1]);
var title = markerInfo[i][2];
var marker = new google.maps.Marker({
position: Latlng,
animation: google.maps.Animation.DROP,
map: map,
title:title,
icon: markerUrl
});
google.maps.event.addListener(marker, 'click', function() {
console.log('test');
});
};
You should probably create a function , which accepts marker as the argument , and call the function from within the for loop itself passing the current marker as the parameter.
function addListner(marker)
{
google.maps.event.addListener(marker, 'click', function() {
console.log('test');
});
}
And call the function inside the loop.
While referring to marker outside the for loop there is no reference to which marker it referring to. You need to assign a listener to each marker individually.
Okay so I am having troubles making the custom markers on my map link to new pages on my website.
Here is my array containing all the needed info about each marker:
var locations = [
['Passage Island', 49.343085, -123.305938, 'tylerkohlhaas.github.io/waterscout/passage.html'],
['Point Atkinson', 49.329925, -123.264994, 'tylerkohlhaas.github.io/waterscout/patkinson.html']
];
And here is my for loop that creates each marker, and should be adding an event listener to each marker:
var markers = [], i;
for(i=0; i < locations.length; i++)
{
markers.push(new google.maps.Marker({
position: new google.maps.LatLng(locations[i][1], locations[i][2]),
map: map,
url: locations[i][3] //not sure why this isn't linking to anything
}));
google.maps.event.addListener(markers, 'click', function(){
window.location.href = markers.url;
});
}
For some reason my markers aren't linking to anything at all. I'm not too sure why. Finding examples for this kind of thing online seem to be few and far between. Any help would be appreciated!
If you need to see more code, here is my github: https://github.com/tylerkohlhaas/waterscout
var locations = [
['Passage Island', 49.343085, -123.305938, 'http://tylerkohlhaas.github.io/waterscout/passage.html'],
['Point Atkinson', 49.329925, -123.264994, 'http://tylerkohlhaas.github.io/waterscout/patkinson.html']
];
var map = new google.maps.Map(document.getElementById('map'),
mapOptions);
var i;
for(i=0; i < locations.length; i++)
{
var markers = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][1], locations[i][2]),
map: map,
url: locations[i][3], //not sure why this isn't linking to anything,
zIndex: 20
});
google.maps.event.addListener(markers, 'click', function(){
window.location.href = markers.url;
console.log("here we go");
});
}
I addead a http:// to the locations and changed your definition of a marker. The EventListener was not working, you can easily do a console.log - also take the z-index into consideration. Works for me now.
best
M
I'm trying to show markers on my map. but it's not showing them.
this is the code I use:
var map;
var markers = new Array();
function initialize() {
var mapOptions = {
zoom: 12,
center: new google.maps.LatLng(27.9881, 86.9253),
};
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
google.maps.event.addListener(map, 'click', addMarker);
}
function addMarker(event) {
markers.push(event.latLng);
marker = new google.maps.Marker({
position: event.latLng,
map: map
});
console.log(markers);
}
google.maps.event.addDomListener(window, 'load', initialize);
the console is logging on every click an new coordinate, so the function is called, and coordinates are passed. And I can't really see any problems in the marker code.
So can anyone see the problem?
map is a local variable, only visible inside initialize.
Use this instead of map when you set the map-property of the marker:
function addMarker(event) {
markers.push(event.latLng);
marker = new google.maps.Marker({
position: event.latLng,
map: this
});
}
Explanation:
the callback will be executed in the scope of the object that triggers the event. Here it is the Maps-instance(because the click-listener has been applied to the map ), this will refer to this object inside the callback.
markers.push(event.latLng);
Here you're pushing the latlng, not the marker.
markers is an array variable with global scope, whereas marker is a local variable.
In markers array you have to insert each inidividual marker and then process it.
function addMarker(event) {
var marker = new google.maps.Marker({
position: event.latLng,
map: map
});
markers.push(marker);
}