so i create markers when a new document get inserted on the FSCollection like this.
i have this find variable.
cordenadasClientes = Clientes.find({}, {fields:{'metadata.latCliente': 1,'metadata.longCliente':
follow by this eachFunction.
var count = 0,
markers = [],
marker;
cordenadasClientes.forEach(function(){
var latitudCliente = cordenadasClientes[count].metadata.latCliente;
var longitudCliente = cordenadasClientes[count].metadata.longCliente;
var nombreCliente = cordenadasClientes[count].metadata.nombreCliente;
marker = new google.maps.Marker({
position: new google.maps.LatLng(latitudCliente ,longitudCliente),
map: map,
title: nombreCliente,
icon :'http://maps.google.com/mapfiles/marker_yellow.png',
})
count++;
markers.push(marker);
})
And its work pretty find, every time i create some document on Clientes Collection, a marker its inserted, so also have this markers array, so every time a new marker its created markers.push(marker); its execute, and thats woork nice to, but now im trying to do this
google.maps.event.addListener(markers, 'click', function() {
map.setZoom(8);
});
but dont work, so im trying to see how my markers array looks like so make this other function;
function arrayMarkers(element,index,array){
console.log(markers);
}
and calling that arrayMarkers function like this;
[markers].forEach(arrayMarkers);
and getting this Console.log;
im the index : 0 and the object [object Object],[object Object]
So i want to create markers sotring on a array and after using that markers on a eventListener, what im doing wrong?, seems to like event listener just work on 1 marker
example
i have 2 markers, so when i click on 1 marker its zoom perfectly, but when i click on the second marker its soom to the first marker
this is how my markers array looks;
[On, On]>
0: on
1: on
like if im nesting array on an array
and if i use
function arrayMarkers(element,index,array){
console.log(array);
}
i got this
[Array[2]]
>
0: Array[2]
>
0: On
1: On
Done By Creating this function
//Added nombreCliente as parameter
function myInfoWindow(marker2,map,nombreCliente,telefonoCliente,ubicacionCliente,facebookCliente){
var infoWindow = new google.maps.InfoWindow();
google.maps.event.addListener(marker2, 'click', function() {
for(var i=0;i<cordenadasClientes.length;i++){
infoWindow.setContent( "Informacion Cliente : <br/>" + "Dale Pa: " + nombreCliente + "<br/> Telefononos: " + telefonoCliente + "<br/> Ubicado en: " + ubicacionCliente + "<br/> No olvides Pasarte Pa' su Facebook: ' " + '<a href="#' + facebookCliente + '">' );
infoWindow.open(map, marker2);
}});
}
And calling it just before markers.push
myInfoWindow(marker2,map,nombreCliente,telefonoCliente,ubicacionCliente,facebookCliente);
Related
so I have a project that's working with Google Maps, using KnockoutJS. I define the markers like so:
for (i = 0; i < markerData.length; i++) {
// Grab marker data so we only have to call it once
var m = markerData[i];
// Define everything
var position = new google.maps.LatLng(m.location.lat, m.location.lng);
var title = m.title;
// etc etc
// Push all this info to the google maps marker
var marker = new google.maps.Marker({
map: map,
position: position,
title: title
// etc with rest
});
And then in the same for loop, I try to define an info window, simplified for reading:
google.maps.event.addListener(marker, 'click', function() {
infoWindow.setContent(this.title + '<br>' + this.address + '<br><a target="_blank" href="' + this.directions + '">Get Directions</a>');
infoWindow.open(map, this);
map.setCenter(this);
});
While it works exactly as I like it, linters are saying not to make a function inside the for loop. With that being said - is there a way I can move this outside the for loop and still get it to work effectively? Everything I've tried thus far has essentially turned into another for loop in one way or another, which still fires up the linter.
I feel like I'm missing something blatantly apparent here. Any thoughts or ideas to how I can properly apply this?
As a side note - all markers are in the KO vm viewModel.gMarkers(). Greatly appreciate any help, thanks!
Specifically the linter is complaining about the anonymous function google.maps.event.addListener(marker, 'click', function() {}; within the for loop. You could try putting it into its own function and calling it within the loop with the marker passed in.
var m, position, title, marker;
for (i = 0; i < markerData.length; i++) {
// Grab marker data so we only have to call it once
m = markerData[i];
// Define everything
position = new google.maps.LatLng(m.location.lat, m.location.lng);
title = m.title;
// etc etc
// Push all this info to the google maps marker
marker = new google.maps.Marker({
map: map,
position: position,
title: title
// etc with rest
});
doThis(marker);
}
function doThis(marker) {
google.maps.event.addListener(marker, 'click', function() {
infoWindow.setContent(this.title + '<br>' + this.address + '<br><a
target="_blank" href="' + this.directions + '">Get Directions</a>');
infoWindow.open(map, this); // Not sure where map is coming from
map.setCenter(this);
});
}
This question already has answers here:
Google Maps JS API v3 - Simple Multiple Marker Example
(15 answers)
Closed 7 years ago.
So, I have the following Javascript code for some custom markers:
window.addEventListener('load', initialise)
//Initialises the map view
function initialise() {
var mapOptions = {
center: new google.maps.LatLng(53.4113594, -2.1571162),
zoom: 14,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
//Creates the actual Map object
var map = new google.maps.Map(document.getElementById("mapArea"), mapOptions);
setMarkers(map, myLocations);
}
var myLocations = [
['Stockport Town Hall', 'This is the town hall. Where things... happen.', 'townhall.jpg', 53.406, -2.158215, 'images/markers/townhall.png'],
['Stockport Town Centre', 'This is the centre of town. Where there are shops. And food. and... stuff', 'stockportcentre.jpg', 53.4175146, -2.1490619,
'images/markers/shopping.png'
],
['Stockport College', 'This is Stockport college. Where learning happens.', 'stockportcollege.jpg', 53.4040427, -2.1587963, 'images/markers/Learning.png'],
['Stockport Train station', 'This is the train station. Where you catch trains.', 'stockporttrainstation.jpg', 53.4056234, -2.1637525, 'images/markers/train.png']
];
function setMarkers(map, myLocations) {
for (var i in myLocations) {
var name = myLocations[i][0];
var info = myLocations[i][1];
var image = myLocations[i][2];
var lat = myLocations[i][3];
var lng = myLocations[i][4];
var indivIcon = myLocations[i][5];
var latlngset;
latlngset = new google.maps.LatLng(lat, lng);
var marker = new google.maps.Marker({
map: map,
title: name,
position: latlngset,
icon: indivIcon
});
//content here!
var infoContent = '<h3>' + name + '</h3>' + info +
'<br /><img width = "128" height = "128" src = "images/' + image + ' " ' + '</div>';
var infowindow = new google.maps.InfoWindow();
google.maps.event.addListener(
marker, 'click',
function() {
infowindow.setContent(infoContent);
infowindow.open(map, this);
});
}
}
Now, the markers work just fine. I can open them up, they auto-close and go to other markers, but the weird issue is: The infoWindows all show the "Stockport Train Station" information and I have no idea why. What is it I'm doing wrong here?
So what's happening is this. You're looping over all your locations, creating a marker for each one, and that's fine. And for each marker, you're creating an event listener, which only gets called when a marker is clicked on.
Within that loop, you're basically doing this for every marker, updating the value of the infoContent variable each time:
var infoContent = "...";
So at the end of the loop, infoContent will be equal to whatever you set it to for the last marker, something like
'<h3>Stockport Train station</h3> etc...'
So then whenever you click on any of the markers, it executes this function:
infowindow.setContent(infoContent);
infowindow.open(map, this);
So it correctly opens the current marker. And it sets the content of the infowindow to whatever infoContent is... i.e. always the value given to it at the end of that loop.
Instead try this, set the content into a property on the marker, then use that:
var infoContent = '<h3>' + name + '</h3>' + info +
'<br /><img width = "128" height = "128" src = "images/' + image + ' " ' + '</div>';
var marker = new google.maps.Marker({
map: map,
title: name,
position: latlngset,
icon: indivIcon,
content: infoContent
});
And then in your event listener you can refer to that directly:
google.maps.event.addListener(
marker, 'click',
function() {
infowindow.setContent(this.content);
infowindow.open(map, this);
});
I've seen other questions related to this and none of the solutions I saw seemed to help. Maybe I'm just overlooking something.
Any help would be appreciated.
I have a map that I'm loading upwards of 1000 markers. When a user performs a mouseover on the marker, I need the infowindow to display for that marker where the marker is.
The issue I'm having is that the same infowindow appears over the same marker no matter which marker I mouseover.
I provided a screenshot below that shows the map with the markers and an infowindow. So, no matter which marker I mouseover, that same infowindow is shown.
This is the code (gm is an instantiated google.maps object):
for (var i = 0; i < opts.LocationsData.length; i ++) {
var datum = opts.LocationsData[i];
var icon = new gm.MarkerImage(datum.map_pin_loc + datum.map_marker + '.svg',null, null, null, new google.maps.Size(31,51));
var loc = new gm.LatLng(datum.latitude, datum.longitude);
var zi = 500;
if(i>9)
{
datum.map_pin_icon = datum.map_pin_loc + 'dot1.svg';
icon = new gm.MarkerImage(datum.map_pin_icon,null, null, null, new google.maps.Size(8,8));
zi=450;
}
var marker = new gm.Marker({
position: loc,
/** title: datum.title != '' ? datum.title : datum.description, **/
icon: icon,
zIndex: zi,
map: map
});
marker.type = 'point';
marker.post_id = datum.pin_id;
marker.scrollAndAnimate = true;
/** (these are used elsewhere in my code for marker management and other purposes) **/
markers.push(marker);
markersLatLngObjs.push(loc);
var infowindow = new gm.InfoWindow({
content: '<strong>' + (datum.title != '' ? datum.title : datum.description) + '</strong>'
});
gm.event.addListener(marker, 'mouseover', function() {
infowindow.open(map,marker);
});
}
The pb is that the mouseover event handler is a closure referencing variables which are unique in the context of the calling function. Better move this part outside the loop to see clearer.
For example you can define a function such as :
function showInfo() {
// called in the context of a marker
var datum = opts.LocationsData[this.placeIndex];
var infowindow = new gm.InfoWindow({
content: '<strong>' + (datum.title != '' ? datum.title : datum.description) + '</strong>'
});
infowindow.open(map, this);
}
just before your loop, then tag the markers with a property placeIndex (for example) in your loop :
marker.placeIndex = i;
and finally bind the handler with :
gm.event.addListener(marker, 'mouseover', showInfo);
Edit: oops, my bad, forgot about the other references, same pb. You can probably replace the marker by 'this' within the handler. I updated the code.
I am currently creating a bit of a Google Maps application using Javascript API v3. It's a map of results from a wordpress database, which dynamically populates the map, creating markers on the map, and on a sidebar the list of wordpress articles.
What I'm trying to do is the following :
when clicking on the link of the wordpress article on the sidebar, instead of going immediately on the article, it have to open the corresponding infowindow on the map. I tried to do it with JQuery, binding a click event on the link to open the infowindow, but unfortunately, it keeps opening the last infowindow created.
I do understand the issue here : JQuery evaluates the 'marker' variable only when the event is fired, thus using the last known value of the variable.
What I want to do is actually evaluates the 'marker' variable WHILE IN THE LOOP. And there I'm stuck. If anyone can help me on this one, I'll be really grateful.
Thanks for the time you'll take to answer me.
Here's a link to the app : http://88.191.128.36/buddypress/carte/
and here the function itself :
function setMarkers(map, markers) {
for (var i = 0; i < markers.length; i++) {
var sites = markers[i];
var siteLatLng = new google.maps.LatLng(sites[1], sites[2]);
if( sites[4] == '10'){
var MarkerImage = new google.maps.MarkerImage('http://dediope.inovawork.net/buddypress/wp-content/themes/TheSource/images/marker-hotel.png');
} else if (sites[4] == '9') {
var MarkerImage = new google.maps.MarkerImage('http://dediope.inovawork.net/buddypress/wp-content/themes/TheSource/images/marker-golf.png');
}
var marker = new google.maps.Marker({
position: siteLatLng,
map: map,
icon: MarkerImage,
title: sites[0],
html: '<div><b>' + sites[0] + '</b> <br /> Voir la fiche de ce lieu </div>'
});
marker_array[i] = marker ;
// THIS IS WHERE I NEED HELP :)
$j('#results_entry li .title:contains("' + sites[0] + '")').bind('click', function(){ infowindow.setContent( marker.html ); infowindow.open( map, marker ); }) ;
var contentString = '<div><b>' + sites[0] + '</b> <br /> Voir la fiche de ce lieu </div>';
var infowindow = new google.maps.InfoWindow({
content: contentString
});
google.maps.event.addListener(marker, "click", function () {
infowindow.setContent(this.html);
infowindow.open(map, this);
});
}
}
PS : Sorry if I didn't explain very well, I'm french so my english isn't perfect :)
I finally found the solution thanks to this post :
Google Maps v3 opens the last infoWindow when a marker is clicked
The way to make it is to actually pass the object 'marker' and 'infowindow' to an external function and THEN bind the event. That way it binds the right marker and infowindow to the link.
Here the bit of code to show you how I did it, in case other people have the same issue as me:
// I REPLACED THAT
$j('#results_entry li .title:contains("' + sites[0] + '")').bind('click', function(){ infowindow.setContent( marker.html ); infowindow.open( map, marker ); }) ;
// BY THAT
BindLink(marker, sites[0], infowindow);
And i created a BindLink function OUTSIDE the function setmarkers() I had :
function BindLink( bmarker, titre, binfowindow ){
$j('#results_entry li .title:contains("' + titre + '")').bind('click', function(){
binfowindow.setContent( bmarker.html );
binfowindow.open( map, bmarker );
}) ;
}
Now it works perfectly fine ( except that I can't figure out to close the previously opened infowindow but that's another story ! )
So i have several markers appearing from an array, but i'm having a lot of difficulty setting the content of the InfoWindows that appear
I put the titles in which works great, but when I try to set the content, it doesn't set the content, but still shows the title.
What am I doing wrong?
for (index = 0; index < data.length; ++index) {
locationName = data[index].LocationName;
locationID = data[index].LocationID;
locationX = data[index].XCord;
locationY = data[index].YCord;
var infoContent = '<div><h3>' + data[index].LocationName + '</h3></div><div>' + data[index].LocationID + '</div>';
var mapLocation = new google.maps.LatLng(locationX,locationY);
var marker = new google.maps.Marker({ // Set the marker
position: mapLocation, // Position marker to coordinates
icon: image, //use our image as the marker
map: map, // assign the marker to our map variable
title: data[index].LocationName,
content: infoContent
//draggable:true //Have a guess what this does
});
// Allow each marker to have an info window
google.maps.event.addListener(marker, 'click', (function (marker, index) {
return function () {
infoWindow.setContent(infoContent);
infoWindow.setContent(this.title);
infoWindow.open(map, this);
}
})(marker, index));
var infoWindow = new google.maps.InfoWindow({
content: infoContent
}), marker, index;
}
You are calling setContent twice:
infoWindow.setContent(infoContent);
infoWindow.setContent(this.title);
I guess the last one should be removed.
Edit:
To get the correct infoWindow content, try moving the creation of the eventListener to a function:
// Allow each marker to have an info window
updateInfoWindowOnMarkerClick(marker, infoContent);
//Somewhere after the loop
function updateInfoWindowOnMarkerClick(marker, infoContent){
google.maps.event.addListener(marker, "click", function () {
infoWindow.setContent(infoContent);
infoWindow.open(map, this);
});
}
Have a look at JavaScript closure inside loops – simple practical example for more information about function scope.