I am creating markers for multiple points like this:
for (i = 0; i < locations.length; i++) {
console.log("Adding marker...");
marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][1], locations[i][2]),
map: map,
draggable:true,
icon: locations[i][3]
});
google.maps.event.addListener(marker, 'dragend', function(){
console.log(marker.getPosition());
// This doesn't work :(
});
}
I then want to (with getPosition) access the positions (lat & long) of each marker when they are moved. How would I achieve that? There will most likely always be 2 markers on the map, so I would need to access marker 0 and marker 1 and log each of them when they are moved.
UPDATE 1:
I tried adding id: locations[i][0] to the marker and then accessing it with: console.log(marker.id); But that always returns the ID/name of the second marker, even if the first one is moved.
Use this inside the click listener to reference the marker thing that was clicked.
google.maps.event.addListener(marker, 'dragend', function(){
console.log(this.getPosition());
});
You store the markers into an array while creating them
var arr_marker=[];
for (i = 0; i < locations.length; i++) {
console.log("Adding marker...");
marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][1], locations[i][2]),
map: map,
draggable:true,
icon: locations[i][3]
});
google.maps.event.addListener(marker, 'dragend', function(){
console.log(marker.getPosition());
// This doesn't work :(
});
arr_marker[] = marker;
}
Related
This question already has answers here:
Google Maps JS API v3 - Simple Multiple Marker Example
(15 answers)
Closed 6 years ago.
I have an issue with google maps marker. Actually on my map I added several markers with an event listener to trigger an event on click, but they all seam to trigger the same function.
for(var j = 0; j < lat_long.length; j ++) {
markers[j] = new google.maps.Marker({
position: latitudeAndLongitudeOne,
icon: self.icon,
scaledSize: new google.maps.Size(50, 50),
map: self.map,
title: lat_long[i].name
});
google.maps.event.addListener(markers[j], 'click', function() {
alert(j);
});
}
I have alert( x ) , with x being the id of the last item inserted. whatever the marker I click on.
Any idea?
Thank you
var markers= [];
for(var i = 0; i < lat_long.length; i ++) {
var marker = new google.maps.Marker({
position: latitudeAndLongitudeOne,
icon: self.icon,
scaledSize: new google.maps.Size(50, 50),
map: self.map,
title: lat_long[i].name
});
marker.addListener('click', function() {
alert(marker.title);
});
markers.push(marker);
}
I am not sure but you can try
This is because you can´t define the markers as you do. Create an global array and push in that array the instances of each created marker.
So:
For all markers, define an array to keep the reference of each created marker:
var markers = []; //Global Marker Array
function printMarker(lat, lng){
var marker = new google.maps.Marker({
position: {lat: lat, lng: lng},
icon: icon,
map: map
});
markers.push(marker);
}
Now you just have to add the clickListener to the current reference of the marker witin you loop.
I set my markers like this
var
marker,
i,
markers = [];
for (i = 0; i < locations.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][1], locations[i][2]),
map: map,
icon: 'img/markers/t1.png',
id: locations[i][3]
});
markers.push(marker);
marker.addListener('mouseover', function() {
marker.setIcon("img/serve-bracket.png");
});
}
This only seems to attach the event handler on the last one. How do I add it to all markers
You need to wrap your addListener in a closure.
var marker, i;
var markers = [];
for (i = 0; i < locations.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][1], locations[i][2]),
map: map,
icon: 'img/markers/t1.png',
id: locations[i][3]
});
google.maps.event.addListener(marker, 'mouseover', (function(marker, i) {
return function() {
marker.setIcon("img/serve-bracket.png");
}
})(marker, i));
markers.push(marker);
}
I am looking for help to get a custom marker. The code is currently broken. Here is my script. When I put icon in the for loop, it breaks. When I remove it, everything works.
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 3,
center: new google.maps.LatLng(35.239313, -41.073296),
mapTypeId: google.maps.MapTypeId.HYBRID
});
map.setOptions({ minZoom: 3, maxZoom: 15 });
var infowindow = new google.maps.InfoWindow();
var image = 'images/research-pin.png';
var marker, i;
In this loop when I add "icon" to the for loop, it does not display. I need to display multiple markers all using the same custom image.
for (i = 0; i < locations.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][1], locations[i][2]),
map: map,
html: locations[0]
icon: image
});
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent(locations[i][0]);
infowindow.open(map, marker);
}
})(marker, i));
}
You are missing a comma. This:
marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][1], locations[i][2]),
map: map,
html: locations[0] //<----- missing comma
icon: image
});
should be:
marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][1], locations[i][2]),
map: map,
html: locations[0], // <---- added comma
icon: image
});
You should be getting a syntax error.
Is it possible to open all info windows by default. I tried the following but it doesn't work:
var infowindow = new google.maps.InfoWindow({
maxWidth: 160
});
// Add the markers and infowindows to the map
for (var i = 0; i < locations.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][1], locations[i][2]),
map: map,
icon: icons[iconCounter]
});
infowindow.setContent(locations[i][0]);
infowindow.open(map, marker);
}
Your code only includes one infowindow, if you want them all to open, you need to create an infowindow for each marker.
Update: didn't notice when I wrote this that this question is tagged google-maps-api-2. This answer will only work for the Google Maps Javascript API v3, the deprecated Google Maps Javascript API v2, only supports a single infowindow at a time.
// Add the markers and infowindows to the map
for (var i = 0; i < locations.length; i++) {
var marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][1], locations[i][2]),
map: map,
icon: icons[iconCounter]
});
var infowindow = new google.maps.InfoWindow({
content: locations[i][0],
maxWidth: 160
});
infowindow.open(map, marker);
}
Hi all I have a site where I use google maps.
The problem is: I add some marker into the map adn i want that every marker if clicked, alert me its data.
With my code alert only the last (test9) because the variable is the same. How to add a listener of a dynamic variable?
This is my code:
for (i = 0; i<10; i++){
myLatlng = new google.maps.LatLng((44.900)+(i/10), 11.634521);
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title:"Hello World!"+i,
data:"test"+i
});
google.maps.event.addListener(marker, 'click', function() {
alert(marker.data);
});
}
Ok try adding a new function such as addMarkerFunction(marker)
such as
function addMarkerFunction(marker){
google.maps.event.addListener(marker, 'click', function() {
alert(marker.data);
});
}
Then edit your for loop code to be :
for (i = 0; i<10; i++){
myLatlng = new google.maps.LatLng((44.900)+(i/10), 11.634521);
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title:"Hello World!"+i,
data:"test"+i
});
addMarkerFunction(marker);
}
removing the call to google.maps.event.addListener