We Keep Coding

Google maps API add infowindow to array of markers on click event

I'm trying to make an array of markers and have each marker open an info window with related info onclick but I either get a cannot read 'apply' property of undefined or it opens on the wrong marker; My 2 attempts were:
Cannot read apply:
var infowindow = new google.maps.Infowindow();
for (var i=0;i<popular.length;i++){
var mkrLatLng = new google.maps.LatLng(popular[i][1], popular[i][2]);
var marker = new google.maps.Marker({
map: map,
title: popular[i][0],
position: mkrLatLng
});
markers.push(marker);
}
for (var i=0;i<markers.length;i++){
markers[i].addListener('click', (function(){
console.log('click');
cont = "<div> " + markers[i].title + " </div>";
infowindow.setContent(cont);
infowindow.open(map, marker);
})(markers));
}
Opens on wrong marker (Anonymous function is wrapped in another function since it got rid of the undefined error, I don't understand why):
var infowindow = new google.maps.Infowindow();
for (var i=0;i<popular.length;i++){
var mkrLatLng = new google.maps.LatLng(popular[i][1], popular[i][2]);
var marker = new google.maps.Marker({
map: map,
title: popular[i][0],
position: mkrLatLng
});
marker.addListener('click', function(){(function(){
console.log('click');
cont = "<div> " + marker.title + " </div>";
infowindow.setContent(cont);
infowindow.open(map, marker);
})(marker)});
markers.push(marker);
}

Your structure is wrong
this is example enter link description here
//wrong
for(var i=0;i<3;i++){
var count=i
$('<p>wrong</p>').on('click',function(){
alert(count)
}).appendTo('body')
}
//what you want
for(var i=0;i<3;i++){
createEl(i)
}
function createEl(i){
$('<p>correct</p>').on('click',function(){
alert(i)
}).appendTo('body')
}
Hope this will help you understand why you're wrong
So you need to change your code to this
for(){
createMarker(parameter)
}
function createMarker(parameter){
var marker=...,
infowindow=....
marker.addlistener(...)
.......
}

Try your second code, make var infowindow global, maybe it'll work, I'm not sure.
Or else you can new every infowindow in forloop, and push into array, just like you handle markers.
var mark = new google.maps.Marker({
map: map,
position: place.geometry.location,
optimized: false,
icon: 'red-dot.png'
}),
infowindow = new google.maps.InfoWindow()
infowindow.setContent(place.name)
infowindows.push(infowindow)
//then addlistener to marker
//markers.push(marker)
To open just one infowindow, use infowindow.close() to close all infowindows,
then call infowindow.open(map,marker)

Update / reload markers without reloading google map

I'm using the following code to generate marker pins. It loads perfectly, but to the left of this map I have filters. How do I reload the markers without reloading the map? This has been causing some frustration so any help would be appreciated.
Many thanks,
//Google map results
var contentStrings = [];
var infowindow = new google.maps.InfoWindow();
var mapinited = false;
var map;
var myOptions = {
zoom: 11,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var currentinfobox;
var myLatlng;
var markersArray=[];
var LatLngList = [];
$().ready(function() {
//reinit search
if (window.location.hash) {
submitForm(window.location.hash.replace('#',''));
}
else if (readCookie('sf')) {
//submitForm(readCookie('sf'));
}
//init map
$('#map_view').click(function() {
if (mapinited) {
return;
} else {
mapinited = true;
initMap();
}
function initMap() {
locate(["Ireland"],function(result) {
map = new google.maps.Map(document.getElementById("search_map"), myOptions);
myLatlng = new google.maps.LatLng(result.lat(),result.lng());
var key =0;
$.each(map_results, function(key, value){
LatLngList[key] = new google.maps.LatLng(value.lat,value.long)
contentStrings[key] =
'<div id="ginfo_content" class="map-pop-up">'+
'<span class="content-top"> </span>'+
'<div class="content-middle">'+
'<div class="map-filler">'+
'<a class="map-close" href="javascript:;" onclick="infowindow.close();" title="Close">x</a>'+
'<br class="clearfix">'+
'<div class="map-pop-up-left">'+
'<div class="thumbnail"><img src="'+ value.image +'" width="64" height="64"></div>'+
'Contact'+
'</div>'+
'<div class="map-pop-up-right">'+
'<h2>'+ value.firstname +' '+value.lastname+', '+ value.address +'</h2>'+
'<p>'+ stripslashes(value.about) +'</p>'+
'</div>'+
'<br class="clearfix">'+
'<div class="map-pop-up-footer">View Profile<span class="telephone">Telephone: '+ value.phone +'</span></div>'+
'</div>'+
'</div>'+
'<span class="content-bottom"> </span>'+
'</div>';
key++;
});//end each
map_results="";
google.maps.event.addListener(infowindow, 'domready', function() {
var infocontent = $('#ginfo_content').clone();
var l = $('#ginfo_content').parent().parent().parent().addClass('original_popup').html('');
$('.original_popup').append(infocontent).show();
$('.original_popup').css('width','360px').css('height','230px').css('left','+=27px').css('top','+=65px');
});
var zoomChangeBoundsListener = google.maps.event.addListener(map, 'zoom_changed', function() {
if (this.getZoom() > 14) // Change max/min zoom here
this.setZoom(14);
google.maps.event.removeListener(zoomChangeBoundsListener);
});
var infoboxlistener = google.maps.event.addListener(map, 'zoom_changed', `enter code here`function() {
infowindow.close();
});
loadMapInit(LatLngList,contentStrings);
});
}
});
});

Hopefully this is answering what you're asking:
When you create a marker, you can use the 'map' parameter to set its map and have it show up. Or, if you want to tie it to a filter, you can ignore the map paramter and use marker.setMap(map) later.
// To add the marker to the map, use the 'map' property
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title:"Hello World!"
});
If you want to 'remove' and 'add' markers with events, you can use marker.setMap(null) to remove the marker and marker.setMap(map) to re-add it.
var marker = new google.maps.Marker({
position: myLatlng,
title:"Hello World!"
});
// To add the marker to the map, call setMap();
marker.setMap(map);
// To remove the marker from the map
marker.setMap(null);
https://developers.google.com/maps/documentation/javascript/markers
Update:
So if you wanted to 'reload' the markers, you could traverse through and array of currently active markers, set their maps to null, and then reset them on the map.

My page loads maps in two scenarios 1) first load 2) ongoing refreshing of a google map through ajax calls.
The following worked for me
<input type="hidden" id="lonDeg"><!--route lat to here via ajax call-->
<input type="hidden" id="latDeg"><!--route lon to here via ajax call-->
<script>
var map;
function initMap() {
// these two lines are the only variation from the native google
// API code. They allow for dynamic updates of the lon/lat (below)
var lonDeg = parseFloat($("#lonDeg").val());
var latDeg = parseFloat($("#latDeg").val());
var midp = {lat:latDeg, lng:lonDeg };
map = new google.maps.Map(document.getElementById('map'), {
scaleControl: true,
center: midp,
zoom: 10
});
var marker = new google.maps.Marker({map: map, position: midp});
marker.addListener('click', function() {
infowindow.open(map, marker);
});
}
</script>
The event trigger in my case a button
<button id="getNextMap">Go to Next Map</button>
Then finally the javascript that makes it all happen
var qstring = 'myArgsToPass';
var csv = new Array();
$.ajax({
url: 'mapProfileGrabber.php',
type: 'POST',
data: {q:qstring},
success: function(data) {
csv = data.split(",");
$("#lonDeg").val(csv[0]);
$("#latDeg").val(csv[1]);
initMap();
}

In my case, I'm using SVG icons, and I'm changing the strokeColor in code, after the marker (and its icon) are on the map.
To have the map display the new color, I simply call setMap again:
marker.setMap(map);
I find no need to remove it first with marker.setMap(null);
I have a hunch this will work with other changes to the marker, like its icon's URL, etc.

Google Maps with Multiple Information in one marker

I am developing a web application that contains some information about place. That place may have more than one agenda. Can I show more information in one marker, such as stack balloon?
This is my maps
http://petamajelis.org/maps/index.php
This is my data
http://petamajelis.org/maps/ajax2.php
there are some places that have more than one agenda, and I want to show all of that agendas in one marker if the latitude and longitude are same.
this is my code to show marker depend on database, I put it in index.php
function load() {
var map = new google.maps.Map(document.getElementById("map"), {
center: new google.maps.LatLng(-6.270293,106.830995),
zoom: 13,
mapTypeId: 'roadmap'
});
var infoWindow = new google.maps.InfoWindow;
// Change this depending on the name of your PHP file
downloadUrl("ajax2.php", function(data) {
var xml = data.responseXML;
var markers = xml.documentElement.getElementsByTagName("marker");
for (var i = 0; i < markers.length; i++) {
var name = markers[i].getAttribute("name");
var address = markers[i].getAttribute("address");
var type = markers[i].getAttribute("type");
var materi = markers[i].getAttribute("materi");
var pemateri = markers[i].getAttribute("pemateri");
var tanggal = markers[i].getAttribute("tanggal");
var hari= markers[i].getAttribute("hari");
var jam= markers[i].getAttribute("jam");
var point = new google.maps.LatLng(
parseFloat(markers[i].getAttribute("lat")),
parseFloat(markers[i].getAttribute("lng")));
var html = "<b>" + name + "</b> <br/>" + address + "<br/>" +materi+ " : "+pemateri+ "<br/>"+ hari +" "+tanggal+ " Jam : "+jam;
var icon = customIcons[type] || {};
var marker = new google.maps.Marker({
map: map,
position: point,
icon: icon.icon,
shadow: icon.shadow
});
bindInfoWindow(marker, map, infoWindow, html);
}
});
}
function bindInfoWindow(marker, map, infoWindow, html) {
google.maps.event.addListener(marker, 'click', function() {
infoWindow.setContent(html);
infoWindow.open(map, marker);
});
}
function downloadUrl(url, callback) {
var request = window.ActiveXObject ?
new ActiveXObject('Microsoft.XMLHTTP') :
new XMLHttpRequest;
request.onreadystatechange = function() {
if (request.readyState == 4) {
request.onreadystatechange = doNothing;
callback(request, request.status);
}
};
request.open('GET', url, true);
request.send(null);
}
could i modify that code to show some information if latitude/longitude are same and show it in a balloon above marker?
thanks before

Possible way to achieve it(there may be many ways):
create some object at the begin of the callback of downloadUrl()
var markerContents={};
inside the loop where you create the markers populate this object with properties. As name for the properties assign the string-representation of the point(will be returned by LatLng.toString()). Create a variable of this string:
var markerId = point.toString();
First you have to check now if this property already exists, when not create it and set the value to an empty array:
if(!markerContents[markerId]){
markerContents[markerId] = [];
}
Then, after the line where create the html, push the html into the array:
markerContents[markerId].push(html);
to avoid the creation of multiple markers at the same position, leave the current iteration before you create the marker, when there are more than 1 item inside the array:
if(markerContents[markerId].length>1){return;}
modify the call of bindInfoWindow(); , pass the array as argument instead of html
bindInfoWindow(marker, map, infoWindow, markerContents[markerId]);
Modify the click-listener of the Marker so that he may use the content of the array as InfoWindowContent
function bindInfoWindow(marker, map, infoWindow, html) {
google.maps.event.addListener(marker, 'click', function() {
infoWindow.setContent(html.join('<hr/>'));
infoWindow.open(map, marker);
});
}
There will no longer be multiple markers at the same position, instead there will be 1 marker with the content set to the html of all markers with this position, delimited by a horizontal rule.

google maps, adding click event to anchors to open info windows

I have an application using Google maps, currently I have a number of markers added to the page and clicking on them opens up a info window.
I also have a pagniated list of results which I would like to open the corresponding info window when clicked. Currently clicking on one of these anchors opens all of the info windows, but this is as far as I can get currently.
I have a position marker function:
positionMarkers: function(lat, lng, user) {
var marker = new google.maps.Marker({
animation: google.maps.Animation.DROP,
position: new google.maps.LatLng(lat, lng),
map: map
});
if (caption == null) {
var caption = 'No caption available';
} else {
var caption = caption.text;
}
var contentString = '<div class="infoWindow"><h2>' + user + '</h2></div>';
var infowindow = new google.maps.InfoWindow({
content: contentString,
maxWidth: 284
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map, marker);
});
$('.instaframe').bind('click', function(){
infowindow.open(map, marker);
});
}
The trouble I am having is with the bind function towards the end of the snippet. I am not sure where to go to bind the click event with just the marker being added each time the positionMarkers function runs.
Marker one
Marker two
Marker three
Help would be greatly apprecaited.

Changing the Google Maps Marker HTML after a function is ran

So I'm trying to figure out a way to change the HTML of Google Maps V3 markers after they have been pulled from the database but before they are pushed up to the array.
When getFishing() is called, I'd like to run convertRate(rate) so that if the rate variable is equal to two or more, it shows a picture which is within the HTML of the Markers themselves. I've tried putting it in the bindInfoWindow4() and I've tried several places within the getFishing() function with no success. Has anyone done this before? Is it possible after the markers have been pushed up to the fishArray?
function getFishing() {
fishingUrl("XML_Fishing.php", function (data) {
var xml = data.responseXML;
var markers = xml.documentElement.getElementsByTagName("marker");
for (var i = 0; i < markers.length; i++) {
var id = markers[i].getAttribute("id");
var title = markers[i].getAttribute("title");
var rate = markers[i].getAttribute("rate");
var Fishhtml = "<img id='1star' src='images/1star.png' style='visibility:hidden'>";
var icon = FishingIcon;
var Fishmark = new google.maps.Marker({
map: map,
position: point,
icon: icon.icon
});
fishArray.push(Fishmark);
bindInfoWindow4(Fishmark, map, Fishinfo, Fishhtml);
}
});
}
function convertRate(rate) {
if (rate >= 2) {
document.getElementById("1star").style.visibility = 'visible';
}
}
function bindInfoWindow4(marker, map, infoWindow, html) {
google.maps.event.addListener(marker, 'click', function () {
infoWindow.setContent(html);
infoWindow.open(map, marker);
});
}

If you change your click listener to display the HTML saved in a member variable of the marker, you can change it at any time. If the InfoWindow is open, you may want to close it and reopen it (or update its content in place, but that gets more complicated).
Something like:
function bindInfoWindow4(marker, map, infoWindow, html) {
marker.myHtmlContent = html;
google.maps.event.addListener(marker, 'click', function() {
infoWindow.setContent(marker.myHtmlContent);
infoWindow.open(map, marker);
});
}
Then update the content by changing the value in marker.myHtmlContent. To make it visible, somthing like this:
marker.myHtmlContent = "<img id='1star' src='images/1star.png' style='visibility:visible'>";