Develop Reference

Add info for multiple markers from dynamic content

I have an array like this deviceId = [005305230001JIZZZZ, 085835360001NBGJZZ, 085835360002NBGJZZ].
The info window should show the deviceId and be displayed based on which marker is clicked. I started looking at JavaScript only a few days back and can't understand how the functions work and dont have the time right now to learn becauseI have to get this done. I saw a few implementations on this, but I think they have done the adding multiple markers differently using functions, I think. I couldn't understand it so I used for loop.
The latArray and lngArray have something like this [12.1456,12.5256,11.566] and [72.145,72.4557,75.23535]
I cant figure out how to add info windows for corresponding markers.
This is the code for map:
function initMap() {
var bounds = new google.maps.LatLngBounds();
var mapDiv = document.getElementById('map');
var map = new google.maps.Map(mapDiv);
map.setCenter(new google.maps.LatLng(latArray[0],lngArray[0]));
map.setZoom(18);
for(i=0;i<latArray.length;i++)
{
marker = new google.maps.Marker({
position: new google.maps.LatLng(latArray[i],lngArray[i]),
map: map,
title:"This is the place.",
// icon:"phone4.png"
});
//bounds.extend(marker.getPosition());
console.log(latArray);
console.log(lngArray);
}
//map.fitBounds(bounds);
var infoWindow = new google.maps.InfoWindow({
content: contentString
});
marker.addListener('click', function() {
infoWindow.open(map, marker);
});
}
How to show info window of corresponding markers.
This is content for marker:
contentString = '<div id = "content>'
+'<p style = "color:#000000">DeviceID<p>' +
'<p>'+ deviceId[i] + '<br></p>' //deviceId is the array with content
+ '</div>'
I read something about closures but didn't understand. Please help
Edit: I just tried this. I'm getting js?callback=initMap:34 InvalidValueError: setPosition: not a LatLng or LatLngLiteral: not an Object
What i tried:
var markerArray=[];
for(i=0;i<latArray.length;i++)
{
markerArray.push("new google.maps.LatLng("+ latArray[i]+","+lngArray[i]+")");
console.log(markerArray[i]);
}
console.log(markerArray[0]);
for(i=0;i<latArray.length;i++)
{
marker = new google.maps.Marker({
position: markerArray[i],
map: map,
title:"This is the place.",
// icon:"phone4.png"
});
var infoWindow = new google.maps.InfoWindow({
content: contentString[i]
});
marker.addListener('click', function(marker,contentString) {
infoWindow.open(map, marker);
});
}

So I will not bother you with the explanation how closures work (as you are saying your not interested in it now), I just supply you the solution:
// Your arrays with geo informations
var latArray = [-25.363, -26.263, -25.163];
var lngArray = [131.044, 131.144, 132.044];
// Your array with device information
var deviceIdArray = ["AAA", "BBB", "CCC"];
// Just create map according to the first geo info
var map = new google.maps.Map(document.getElementById("map"), {
center: {lat: latArray[0], lng: lngArray[0]},
zoom: 6
});
// Loop throuhg all geo info
latArray.forEach(function(lat, i) {
// For each one create info window
var infoWindow = new google.maps.InfoWindow({
content: '<div id="content>'
+ '<p style="color:#000000">DeviceID<p>'
+ '<p>'+ deviceIdArray[i] + '</p>'
+'</div>'
});
// For each one create marker
var marker = new google.maps.Marker({
map: map,
position: {lat: latArray[i], lng: lngArray[i]}
});
// Click on the currently created marker will show the right info window
marker.addListener("click", function() {
infoWindow.open(map, marker);
});
});
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#map {
height: 100%;
}
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3"></script>
<div id="map"></div>

Take a look at my function with map. It takes json object with some data from PHP and 'translate' it into array and then adds content to multiple markers (it is not dynamic in real time - you have to reload page). In addition it has a search box (which opens certain info window). If you don't understand do not hestitate to ask :).
//check if document is fully loaded, seetting a container for ajax call results
$(document).ready(function() {
var tablica = [];
// ajax call for action preparing set of names, descriptions, coords and slugs needed to render deatiled markers on map
$.ajax({
url: 'map/json_prepare',
dataType: 'json',
success: function(response) {
var obj = JSON && JSON.parse(response) || $.parseJSON(response);
obj.forEach(function(item, index, array)
{
tablica.push(item);
});
//call a function rendering a map itself
var map;
map = new google.maps.Map(document.getElementById('map'), {
center: {lat: 50.06561980, lng: 19.946850},
zoom: 12
});
////////////////////////////////////////////////////////////////////////////////////////////////////
// LOOP ADDING MARKERS FROM DB WITH PROPER INFO WINDOWS (DESCRIPTION AND LINKS)
// Add a markers reference
var markers = [];
$.each(tablica, function( key, value ) {
//markers
var myLatLng = {lat: value[1], lng: value[2]};
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
title: value[0],
clickable: true,
animation: google.maps.Animation.DROP,
adress: value[5]
});
//infowindows
marker.info = new google.maps.InfoWindow ({
content: '<h1>'+ value[0] + '</h1>' + '<br>' + '<br>' + value[3] + '<br>' + value[5] +'<br>' + '<br>' + '' + 'Details' + '<br/>' +
'' + 'Take part in' + '<br>'
});
//eventlistener - after click infowindow opens
google.maps.event.addListener(marker, 'click', function() {
marker.info.open(map, marker);
});
//event listener - after dblclick zoom on certain event is set
google.maps.event.addListener(marker, 'dblclick', function() {
map.setZoom(18);
map.setCenter(marker.getPosition());
});
markers.push(marker);
});
// End of loop adding markers from db.
///////////////////////////////////////////////////////////////////////////////////////////////////////////
///additional event listener - rightclick to get back default zoom
google.maps.event.addListener(map, 'rightclick', function() {
map.setZoom(12);
map.setCenter(map.getPosition());
});
///////////////////////////////////////////////////////////////////////////////////////////////////////////////
//CENTRING MAP AS ALL OF MARKERS IS VISIBLE//
//create empty LatLngBounds object
var bounds = new google.maps.LatLngBounds();
var infowindow = new google.maps.InfoWindow();
for (i = 0; i < tablica.length; i++) {
var marker = new google.maps.Marker({
position: new google.maps.LatLng(tablica[i][1], tablica[i][2]),
map: map
});
//extend the bounds to include each marker's position
bounds.extend(marker.position);
}
//now fit the map to the newly inclusive bounds
map.fitBounds(bounds);
/////////////////////////////////////////////////////////////////////////////////////////////////////
//////////////////////////////////////////////////////////////////////
///SEARCH_BOX////////
///Here comes part of script adding search box
// Create the search box and link it to the UI element.
// Anchor search box and search button to the map.
var input = document.getElementById('pac-input');
var searchBox = new google.maps.places.SearchBox(input);
var button = document.getElementById('submitSearch');
map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);
map.controls[google.maps.ControlPosition.TOP_LEFT].push(button);
//replacing polish characters on order to search without necessity typing them
function cleanUpSpecialChars(str)
{
str = str.replace(/[Ą]/g,"A");
str = str.replace(/[ą]/g,"a");
str = str.replace(/[Ę]/g,"E");
str = str.replace(/[ę]/g,"e");
str = str.replace(/[Ć]/g,"C");
str = str.replace(/[ć]/g,"c");
str = str.replace(/[Ł]/g,"L");
str = str.replace(/[ł]/g,"l");
str = str.replace(/[Ń]/g,"N");
str = str.replace(/[ń]/g,"n");
str = str.replace(/[Ó]/g,"O");
str = str.replace(/[ó]/g,"o");
str = str.replace(/[Ś]/g,"S");
str = str.replace(/[ś]/g,"s");
str = str.replace(/[Ź]/g,"Z");
str = str.replace(/[ź]/g,"z");
str = str.replace(/[Ż]/g,"Z");
str = str.replace(/[ż]/g,"z");
return str;
}
//Function, that search in array of markers, one which fits the key word written in searchbox.
$('#submitSearch').click(function() {
//Catching searched word and preparing its value for search process
var toSearch = $(input).val().trim();
toSearch = cleanUpSpecialChars(toSearch);
toSearch = toSearch.toLowerCase();
console.log('Szukana fraza -> ' + toSearch);
var results = [];
if (toSearch.length >=3) {
// Iterate through the array
$.each(markers, function (i, marker) {
//preparing certain elemnts of marker objects for search process
markers[i].title = cleanUpSpecialChars(markers[i].title);
markers[i].adress = cleanUpSpecialChars(markers[i].adress);
markers[i].title = markers[i].title.toLowerCase();
markers[i].adress = markers[i].adress.toLowerCase();
if (markers[i].title.indexOf(toSearch) > -1 || markers[i].adress.indexOf(toSearch) > -1) {
results.push(markers[i]);
}
});
if (results.length < 1) {
console.log ('nic');
$('#message2').slideDown(500, function () {
setTimeout(function () {
$('#message2').slideUp(500);
}, 5000);
});
}
// Close all the infoWindows, before rendering Search results.
markers.forEach(function (marker) {
marker.info.close(map, marker);
});
//Opens infWindows for multiple markers found and set bounds so that all markers found are visible
results.forEach(function (result) {
result.info.open(map, result);
bounds.extend(result.position);
});
map.fitBounds(bounds);
}
else{
//what if user has typed less than three characters in searchbox -> render flash mess.
$("#message").slideDown(500, function(){
setTimeout(function(){
$("#message").slideUp(500);
},5000);
});
}
});
//Enabling key Enter for triggering a search action.
$(input).keypress(function(e){
if(e.which == 13){//Enter key pressed
$('#submitSearch').click();//Trigger search button click event
}
});
},
//////////////////////////////////////////////////////////////////////////////////////////
//obsługa błędu, jeśli nie zostanie wyświetlona mapa
error: function (xhr, ajaxOptions, thrownError) {
console.log(xhr.status);
console.log(thrownError);
console.log(ajaxOptions);
alert('Map is broken. Please try again later.')
}
});
});
It will not qork here because it doesn't contain data from php.

automatically update marker google maps v3

Good afternoon, I created a map that fills markers with coordinates directly from my mysql database, the map is being generated correctly and markers work when I load the page. Every minute I get new coordinates in the bank and want to update the map with a time interval. For this I used the setInterval that calls the initialization function of the markers, however, are not creating new markers on the map, is always displaying the same, they only update when I give f5 on the page, ie if reloading the page works, but with no interval. He even winked on the map when the time set by the interval, but not updated.
My code:
<script src="js/markerclusterer.js"></script>
<script src="js/jquery-1.5.2.min.js"></script>
<script src="js/jquery.maskedinput-1.3.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
<script>
<?php
if($attmap_form > 0) {
echo 'myTimer = window.setInterval(refreshMapa,"'.$attmap_form.'");';
}
?>
function initialize() {
var mapOptions = {
zoom: 12,
center: new google.maps.LatLng(-25.4848801,-49.2918938),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
locations = [];
<?php
require('conecta.php');
$sql_lista = ("SELECT MONITLATITUDE,MONITLONGITUDE,MONITDATA,MONITHORA,MONITRAIO,MONITPROVEDOR,MONITVELOCIDADE FROM MONITORAMENTO where MONITHORA BETWEEN '$hora1_form' AND '$hora2_form' AND MONITDATA BETWEEN '$data1_form' AND '$data2_form' AND EQUIPIMEI = $imei");
$query_lista = mysql_query($sql_lista);
$achados_lista = mysql_num_rows($query_lista);
while ($achados_lista = mysql_fetch_array($query_lista)) {
$lat = $achados_lista['MONITLATITUDE'];
$lon = $achados_lista['MONITLONGITUDE'];
$Data = $achados_lista['MONITDATA'];
$hora = $achados_lista['MONITHORA'];
$raio = $achados_lista['MONITRAIO'];
$provedor = $achados_lista['MONITPROVEDOR'];
$velocidade = $achados_lista['MONITVELOCIDADE'];
echo 'locations.push ( {Data:"'.$Data.'", latlng: new google.maps.LatLng('.$lat.', '.$lon.'), hora:"'.$hora.'", raio:"'.$raio.'",provedor:"'.$provedor.'",velocidade:"'.$velocidade.'"} );';
}
?>
var bounds = new google.maps.LatLngBounds();
var infowindow = new google.maps.InfoWindow();
var markers = [];
for(var i=0;i < locations.length;i++ ) {
var marker = new google.maps.Marker({
position: locations[i].latlng,
map:map,
title:locations[i].hora
});
markers.push(marker);
bounds.extend(locations[i].latlng);
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent(
'<strong>Data: ' + locations[i].Data + '<br>Hora: ' + locations[i].hora + '<br></strong>Velocidade aproximada: ' + locations[i].velocidade + ' K/H<br>Raio aproximado de: ' + locations[i].raio + ' metros <br>Provedor: ' + locations[i].provedor + '<br>Latitude: ' + locations[i].latlng
);
infowindow.open(map, marker);
}
})(marker, i));
}
markerClusterer = new MarkerClusterer(map, markers, {
maxZoom: 16,
gridSize: 60
});
map.fitBounds(bounds);
}
arrancaMapa();
function arrancaMapa() {
google.maps.event.addDomListener(window, 'load', initialize);
}
function refreshMapa() {
initialize();
arrancaMapa();
}
function clearMarkers() {
setAllMap(null);
}
function stopTimer() {
$("#campoAttMap").val("0");
clearInterval(myTimer);
}
</script>

You shouldn't have to call initialize more than once. You should implement a different logic, for example get the newest marker that is not in the map and add it via
var marker = new google.maps.Marker({
position: locations[i].latlng,
map:map,
title:locations[i].hora
});
markers.push(marker);
bounds.extend(locations[i].latlng);
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent(
'<strong>Data: ' + locations[i].Data + '<br>Hora: ' + locations[i].hora + '<br></strong>Velocidade aproximada: ' + locations[i].velocidade + ' K/H<br>Raio aproximado de: ' + locations[i].raio + ' metros <br>Provedor: ' + locations[i].provedor + '<br>Latitude: ' + locations[i].latlng
);
infowindow.open(map, marker);
}
})(marker, i));
UPDATE:
I will add take the following approach. I don't like mixing PHP and Javascript together, I prefer using JSON and AJAX request.
Update your functions to look like this:
var map;
var markers = [];
setInterval(refreshMapa, 3000);
function initialize() {
var mapOptions = {
zoom: 12,
center: new google.maps.LatLng(-25.4848801,-49.2918938),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
var locations = [];
$.get("getmarkers.php", function(response){
for(var i = 0; i < response.markers.length; i++) {
var marker = response.markers[i];
var myMarker = {
Data: marker.Data,
latlng: new google.maps.LatLng(marker.lat, marker.lon),
hora: marker.hora,
raio: marker.raio,
provedor: marker.provedor,
velocidade: marker.velocidade
};
locations.push(myMarker);
addMapMarker(myMarker);
}
},'json');
markerClusterer = new MarkerClusterer(map, markers, {
maxZoom: 16,
gridSize: 60
});
map.fitBounds(bounds);
}
function refreshMapa() {
// make sure this one only returns markers that are new and not in the map
$.get("getnewmarkers.php", function(){
for(var i = 0; i < response.markers.length; i++) {
var marker = response.markers[i];
var myMarker = {
Data: marker.Data,
latlng: new google.maps.LatLng(marker.lat, marker.lon),
hora: marker.hora,
raio: marker.raio,
provedor: marker.provedor,
velocidade: marker.velocidade
};
locations.push(myMarker);
addMapMarker(myMarker);
}, 'json');
}
function addMapMarker(myMarker) {
var marker = new google.maps.Marker({
position: myMarker.latlng,
map:map,
title:myMarker.hora
});
markers.push(marker);
bounds.extend(myMarker.latlng);
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent('<strong>Data: ' + myMarker.Data + '<br>Hora: ' + myMarker.hora + '<br></strong>Velocidade aproximada: ' + myMarker.velocidade + ' K/H<br>Raio aproximado de: ' + myMarker.raio + ' metros <br>Provedor: ' + myMarker.provedor + '<br>Latitude: ' + myMarker.latlng);
infowindow.open(map, marker);
}
})(marker, i));
}
PS: I'm not sure if the implementation of the addMapMarker is correct I just assumed you had it right in the first place, you should check the documentation and make sure it is correct.

Yeah so the thing is, PHP is a server-side language that only gets executed when the page loads. I'm not sure exactly how you would expect your JS to update the markers, as there are no get/post anywhere. If you want to get data from the server, you have to contact the server.
This loop
while ($achados_lista = mysql_fetch_array($query_lista)) {
$lat = $achados_lista['MONITLATITUDE'];
$lon = $achados_lista['MONITLONGITUDE'];
$Data = $achados_lista['MONITDATA'];
$hora = $achados_lista['MONITHORA'];
$raio = $achados_lista['MONITRAIO'];
$provedor = $achados_lista['MONITPROVEDOR'];
$velocidade = $achados_lista['MONITVELOCIDADE'];
echo 'locations.push ( {Data:"'.$Data.'", latlng: new google.maps.LatLng('.$lat.', '.$lon.'), hora:"'.$hora.'", raio:"'.$raio.'",provedor:"'.$provedor.'",velocidade:"'.$velocidade.'"} );';
}
Only gets executed ONCE. The value of locations doesn't change.
You should read up on jQuery ajax requests. Make an HTTP request to a PHP file that returns the locations as JSON (just echo the JS array) and use the result to update the markers.

Reason:
There is no update function (or code blocks) to get updated or newly added DB info in your code. Also, you will not read and add new db info to your map data because your PHP code is only called once at initialization-time.
Using PHP codes, you will not do it because of the PHP features. PHP will only work on back-end service sides.
Suggestion:
1. You need client-side updates to access service side updates and receive them.
2. You need to add the updated or newly added db data to your Marker (map) array on client sides.
For this,
1. Add client side update features in AJAX or others to update the info to JSON objects.
2. Call the AJAX block (retrieving block or function to read in JSON object array and add them to map marker arrays).
3. Update null pointer of Map Markers to the new Map array.
Sorry for not creating a working code set based on your codes. It will take a fairly long while.

How to Google Maps setCenter / setZoom and set boundaries to include all markers

I've been trying to figure this out from other posts, and can't quite grasp it. Here is the code I'm working with:
<script type="text/javascript">
var mapOptions = {
center: new google.maps.LatLng(29.4814305, -98.5144044),
zoom: 10
};
var map = new google.maps.Map(document.getElementById("map-canvas"),
mapOptions);
var markers = [];
// Add a marker to the map and push to the array.
function addMarker(location) {
var marker = new google.maps.Marker({
position: location,
map: map,
draggable: false,
animation: google.maps.Animation.DROP
});
markers.push(marker);
}
// Sets the map on all markers in the array.
function setAllMap(map) {
for (var i = 0; i < markers.length; i++) {
markers[i].setMap(map);
}
}
// Removes the markers from the map, but keeps them in the array.
function clearMarkers() {
setAllMap(null);
}
// Deletes all markers in the array by removing references to them.
function deleteMarkers() {
clearMarkers();
markers = [];
}
$('#ajax-form').on('submit', function (e) {
e.preventDefault();
var formValues = $(this).serialize();
//console.log('formValues: ' + formValues);
// Clear previous results if present
$('#results-list').html('');
// Send Ajax Request
$.ajax({
url: "/search",
type: "POST",
data: formValues,
dataType: "json",
success: function (data) {
// console.log(data);
var count = 0;
$(data).each(function() {
count++;
// console.log('=========');
// console.log('Id: ' + this.id);
// console.log('Breed: ' + this.breed.name);
// console.log('Dog Name: ' + this.name);
// console.log('Sex: ' + this.sex);
// console.log('Age: ' + this.age);
// console.log('Purebred? ' + this.purebred);
// console.log('Owner: ' + this.user.username);
// console.log('=========');
// console.log(this.user.fullAddress);
// additional syntax to update html with search results.
$('#results-list').append(
'<div class="row">' +
'<div class="col-md-2">' +
"<img src=\"" + this.img_path + "\" class=\"img-responsive thumbnail\" >" +
'</div>' +
'<div class="zero-margin-left blog-block">' +
'<div class="col-md-6">' +
'<h3>' + this.name + ' | ' + '' + this.user.username + '</h3>' +
'</div>' +
'</div>'
);
var address = this.user.fullAddress;
// console.log(address);
var geocoder = new google.maps.Geocoder();
geocoder.geocode({ 'address': address }, function(result, status) {
if (status == google.maps.GeocoderStatus.OK) {
var latLngObj = result[0]["geometry"]["location"];
// add marker to array
addMarker(latLngObj);
} // endif
// COMMENTED OUT NON-WORKING CODE
// // map: an instance of GMap3
// // latlng: an array of instances of GLatLng
// var latlngbounds = new google.maps.LatLngBounds();
// markers.each(function(n){
// latlngbounds.extend(n);
// });
// map.setCenter(latlngbounds.getCenter());
// map.fitBounds(latlngbounds);
}); // end geocode address
}); // end each data loop
// Clear previous markers
deleteMarkers();
// Add all markers to map
setAllMap(map);
// setAllMapTimed(map);
} // end data function
}); // end .ajax
}); // end ajax-form block
</script>
The whole point of this view is to provide search results, and plot markers on the map, according to a predefined radius (a distance within a specified zip code) and some other criteria.
I am trying to, upon marker array population, set the boundaries of the map to include those markers and set the zoom at some kind of appropriate level.
I understand what needs to be done with the boundaries, just not where exactly that code should go. I have no idea how I would calculate zoom (a function to look at the overall distance included in boundaries and calculate zoom accordingly?).
I'm still learning javascript, so any help is appreciated. Thanks!

So you're making an AJAX post to get some data. You then loop over the data, calling your addMarker function for each, and add each marker into an array. After the loop you then delete all markers from the array, then you try to add all the markers from the (now empty) array onto the map using your setAllMap function.
Firstly, when you initially create the markers, you're setting the map already in the MarkerOptions properties:
var marker = new google.maps.Marker({
position: location,
map: map,
So you shouldn't need to do this again in:
markers[i].setMap(map);
Secondly, I'd say do your call to deleteMarkers at the very start of your success handler, before you loop over the results of your AJAX request.
Finally, and to answer your question. When you add each marker, you need to extend the map's "bounds" to include the marker.
Create a variable that is an empty bounds object like so:
bounds = new google.maps.LatLngBounds ();
You'll probably need to make this a global variable in the same way as your map and markers are.
Then in your addMarker function, add:
bounds.extend(location);
Finally at the end of the loop you want to apply this bounds to the map itself:
map.fitBounds(bounds);
Putting it altogether, something like
<script type="text/javascript">
var mapOptions = {
center: new google.maps.LatLng(29.4814305, -98.5144044),
zoom: 10
};
var map = new google.maps.Map(document.getElementById("map-canvas"),
mapOptions);
var markers = [];
var bounds = new google.maps.LatLngBounds();
// Add a marker to the map and push to the array.
function addMarker(location) {
var marker = new google.maps.Marker({
position: location,
map: map,
draggable: false,
animation: google.maps.Animation.DROP
});
markers.push(marker);
bounds.extend(location);
}
// Sets the map on all markers in the array.
function setAllMap(map) {
for (var i = 0; i < markers.length; i++) {
markers[i].setMap(map);
}
}
// Removes the markers from the map, but keeps them in the array.
function clearMarkers() {
setAllMap(null);
}
// Deletes all markers in the array by removing references to them.
function deleteMarkers() {
clearMarkers();
markers = [];
}
$('#ajax-form').on('submit', function (e) {
e.preventDefault();
var formValues = $(this).serialize();
// Clear previous results if present
$('#results-list').html('');
// Send Ajax Request
$.ajax({
url: "/search",
type: "POST",
data: formValues,
dataType: "json",
success: function (data) {
// Clear previous markers
deleteMarkers();
$(data).each(function() {
// additional syntax to update html with search results.
$('#results-list').append('...');
var address = this.user.fullAddress;
var geocoder = new google.maps.Geocoder();
geocoder.geocode({ 'address': address }, function(result, status) {
if (status == google.maps.GeocoderStatus.OK) {
var latLngObj = result[0]["geometry"]["location"];
// add marker to array
addMarker(latLngObj);
} // endif
}); // end geocode address
}); // end each data loop
map.fitBounds(bounds);
} // end data function
}); // end .ajax
}); // end ajax-form block
</script>

Google Maps Spiderfying Markers & Adding Listeners

I'm trying to Spiderfy my markers and adding listeners to them. The Spidefying works fine that means I get the overlapping markers spiderfied but the problem is that I can't seem to figure how to add listeners to these markers. In other words I have tried the following:
Putting the oms.addListener() in a loop. This way, upon clicking on a marker would open all infoWindows on the same marker which isn't delightful.
Putting the oms.addListener() outside the loop like the example on the OMS Git repo.
https://github.com/jawj/OverlappingMarkerSpiderfier/blob/gh-pages/demo.html. This way all the markers have the same infoWindow which is the last one from the loop.
This is my code:
var iw = new google.maps.InfoWindow();
var oms = new OverlappingMarkerSpiderfier(carte, {keepSpiderfied:true});
oms.addListener('click', function(marker){
iw.setContent(content);
iw.open(carte, marker);
});
var markers =[];
var bounds = new google.maps.LatLngBounds();
if (response.length != 0) {
for (var i = 0 ; i < response.length; i++) {
var loc = new google.maps.LatLng(response[i].latlong[0], response[i].latlong[1]);
bounds.extend(loc);
var lemarqueur = new google.maps.Marker({
position: loc,
title: response[i].title
});
content = '<table><tr><td><img src="'
+response[i].image+'"/></td><td><p style="font-size: 13px">'
+response[i].title+'</p> <p style="font-size: 10px"><b>Artists:</b> '
+response[i].artist+'<br><b>Date:</b> '+response[i].startDate+'<br>'
+response[i].address.name +' '+response[i].address.street + '<br>'
+response[i].address.postalcode +', '+response[i].address.city +', '
+response[i].address.country
+'<br><a target="_blank" href ='
+response[i].url+'>More info</a></p></td></tr></table>';
oms.addMarker(lemarqueur);
markers.push(lemarqueur);
};
carte.fitBounds(bounds);
var markerCluster = new MarkerClusterer(carte, markers);
markerCluster.setMaxZoom(15);
markerCluster.setGridSize(40);
google.maps.event.addDomListener(window, 'load', initialiser);
So I would like to know where should I put the addListener() block?
This what I have used before in the loop, using google.maps.event.addListener(), which worked fine:
google.maps.event.addListener(lemarqueur, 'click', function() {
InfoWindow.open(carte, lemarqueur);
});
I hope the question is clear enough,
Thanks in advance.

The oms.addListener() does not act the same way as google.maps.event.addListener().
So I somehow made it to work by using the original google.maps.event.addListener() instead of oms.addListener() inside a for loop. Like so:
var infoWindows = [];
function closeInfoWindows(){
var i = infoWindows.length;
while(i--){
infoWindows[i].close();
}
}
function newMarker(map, response, oms){
var loc = new google.maps.LatLng(response.latlong[0], response.latlong[1]);
var marker = new google.maps.Marker({
position: loc,
title: response.title
});
oms.addMarker(marker);
var WindowOptions = { content:'some desc...'};
var InfoWindow = new google.maps.InfoWindow(WindowOptions);
infoWindows.push(InfoWindow);
google.maps.event.addListener(marker, 'click', function() {
closeInfoWindows();
InfoWindow.open(carte, marker); // or this instead of marker
});
return marker;
}
for (var i = 0 ; i < response.length; i++) {
markers.push(newMarker(map, response[i], oms));
};
Extra credit to: geocodezip and
All infowindows have same data
A working example could be found here (my app): concert-dacote.com

Here is another approach to adding listeners to your spiderfiered markers with NO FOR LOOP NEEDED:
var oms = new OverlappingMarkerSpiderfier (...) ;
// Create this function
function addClickListenerToMarker(marker, onClickListener) {
oms.addListener('click', function (markerArg, eventArg) {
if (marker == markerArg)
onClickListener(marker, eventArg);
});
}
// Add a click listener to your marker
var myMarker = ...
addClickListenerToMarker(myMarker, function (marker, event) {
alert('I have been clicked');
});

Google Maps API v3 - infoWindows all have same content

I've been having problems with the infoWindows and Google Maps API v3.
Initially, I've ran into the problem that everyone else has of closing infoWindows when opening a new one.
I thought to have solved the problem by defining "infowindow" beforehand. Now they close when I click on a new marker, but the content is the same.
How should I re-structure my code to make sure the content is the right one each time - and only one infoWindow is open at a given time?
Thank you!
Paul
var allLatLngs = new Array();
var last = 0;
var infowindow;
function displayResults(start, count){
if(start === undefined){
start = last;
}
if(count === undefined){
count = 20;
}
jQuery.each(jsresults, function(index, value) {
if(index >= start && index < start+count){
var obj = jQuery.parseJSON(value);
$("#textresults").append(index + ": <strong>" + obj.name + "</strong> " + Math.round(obj.distanz*100)/100 + " km entfernt" + "<br/>");
var myLatlng = new google.maps.LatLng(obj.geo_lat, obj.geo_lon);
allLatLngs.push(myLatlng);
var contentString = '<strong>'+obj.name+'</strong>';
infowindow = new google.maps.InfoWindow({
content: contentString
});
var marker = new google.maps.Marker({
position: myLatlng,
//title:"Hello World!"
});
marker.setMap(map);
google.maps.event.addListener(marker, 'click', function() {
if (infowindow) { infowindow.close(map,marker); }
infowindow.open(map,marker);
});
}
});
last = start+count;

UPDATED
You are calling
infowindow.open(map,marker);
inside an jQuery.each iteration, thus, i think it will be calling the last item in the iteration.
Modify your code so you get this inside the jQuery.each iteration.
var curItem = 1;
google.maps.event.addListener(aMarker, "click", function(idx, theContent) {
return function() {
alert(idx); //Should print 1 marker1, 2 for marker 2, to show it's ok.
//Your stuff...
if (infowindow) {
infowindow.close(map,marker);
}
infowindow.setContent(theContent);
infowindow.open(map,marker);
}
} (curItem++, contentString)
);
When you see "return function()" I'm using a javascript closure. I've just used this closure for other stuff. I've got rid of other previous variations in my previous answer.