Develop Reference

Add infoWindows to multiple markers in array

I have a map that I have been trying to figure out adding infoWindow's to markers that live in an array and I am stuck.. With a single map and a single marker I can add an info window no problem. But for the life of me I CAN NOT get the infowindows to work within my array. If anyone could possibly help me get this to work I would be forever greatful. My intentions is to be able to pull html within the infowindows. Here is a fiddle with where I am at so far.
var map;
var markers = [];
function initMap() {
map = new google.maps.Map(document.getElementById('map_canvas'), {
zoom: 14,
center: new google.maps.LatLng(-33.91721, 151.22630),
mapTypeId: 'roadmap',
disableDefaultUI: true
});
// var iconBase = <?php echo "'/images/markers/'"; ?>;
var icons = {
typea: {
icon: "http://maps.google.com/mapfiles/ms/micons/blue.png"
},
typeb: {
icon: "http://maps.google.com/mapfiles/ms/micons/green.png"
},
typec: {
icon: "http://maps.google.com/mapfiles/ms/micons/orange.png"
}
};
function addMarker(feature) {
var marker = new google.maps.Marker({
position: feature.position,
icon: icons[feature.type].icon,
map: map,
type: feature.type
});
marker.addListener('click', function() {
//set zoom level
map.setZoom(20);
//center map
map.setCenter(marker.getPosition());
alert("Testing");
});
markers.push(marker);
}
filterMarkers = function(getType) {
console.log(getType);
for (var i = 0; i < markers.length; i++) {
if (markers[i].type == getType || getType == "") {
markers[i].setVisible(true);
} else {
markers[i].setVisible(false);
}
}
}
var features = [{
position: new google.maps.LatLng(-33.91721, 151.22630),
type: 'typea'
}, {
position: new google.maps.LatLng(-33.91539, 151.22820),
type: 'typeb'
}, {
position: new google.maps.LatLng(-33.91747, 151.22912),
type: 'typec'
}];
for (var i = 0, feature; feature = features[i]; i++) {
addMarker(feature);
}
}
google.maps.event.addDomListener(window, "load", initMap);
Complete working fiddle: http://jsfiddle.net/h80vtmye/

GoogleMap not allow to use infowindow like that. Create a single copy of the infowindow instead of maintaining an array and set contents with infowindow.setContent() during the mouseover event of marker.

Info bubble always shows up on the last marker [duplicate]

This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
Google Maps - Multiple markers - 1 InfoWindow problem
I'm making a map where I plot some towns and places.
As you will see, when you click on a marker, you are redirected to the corresponding page. But now I would like to put the link and some other information in an info bubble popover. So, I've edit my code to this:
function setMarkers(map, locations) {
for (var i = 0; i < locations.length; i++) {
var beach = locations[i];
var myLatLng = new google.maps.LatLng(beach[1], beach[2]);
var infobulle = new google.maps.InfoWindow({content: beach[4], position: myLatLng});
var marker = new google.maps.Marker({position: myLatLng, map: map, title: beach[0], zIndex: beach[3], clickable: true, icon: beach[5],});
marker[i] = marker;
google.maps.event.addListener(marker[i], 'click', function() {
infobulle.open(map, marker);
});
}
}
But as you can see here the info bubble stays "blocked" on the last location. I really don't know how to sort this.
I have the same result with this :
function setMarkers(map, locations) {
for (var i = 0; i < locations.length; i++) {
var beach = locations[i];
var myLatLng = new google.maps.LatLng(beach[1], beach[2]);
var infobulle = new google.maps.InfoWindow({content: beach[4]});
var marker = new google.maps.Marker({position: myLatLng, map: map, title: beach[0], zIndex: beach[3], clickable: true, icon: beach[5]});
google.maps.event.addListener(marker, 'click', function() {
infobulle.open(map, marker);
});
}
Last version :
function setMarkers(map, locations) {
for (var i = 0; i < locations.length; i++) {
processBeach(locations[i]);
}
}
function processBeach(beach) {
var myLatLng = new google.maps.LatLng(beach[1], beach[2]);
var infobulle = new google.maps.InfoWindow({content: beach[4]});
var marker = new google.maps.Marker({position: myLatLng, map: map, title: beach[0], zIndex: beach[3], clickable: true, icon: beach[5]});
google.maps.event.addListener(marker, 'click', function() {
infobulle.open(map, marker);
});
}

You are using the marker variable for two different purposes it seems. One is as a single marker, and one as an array of markers. But you don't need an array of markers, if you use closures. Try this:
function setMarkers(map, locations) {
for (var i = 0; i < locations.length; i++) {
(function(beach) {
var myLatLng = new google.maps.LatLng(beach[1], beach[2]);
var infobulle = new google.maps.InfoWindow({content: beach[4], position: myLatLng});
var marker = new google.maps.Marker({position: myLatLng, map: map, title: beach[0], zIndex: beach[3], clickable: true, icon: beach[5]}))
google.maps.event.addListener(marker, 'click', function() {
infobulle.open(map, marker);
});
}(locations[i]));
}
}
By the way you also had a spurious comma at the end of the options array for google.maps.Marker which will cause problems in some browsers.
EDIT
If you don't want to use closures, this is equivalent:
function processBeach(beach) {
var myLatLng = new google.maps.LatLng(beach[1], beach[2]);
var infobulle = new google.maps.InfoWindow({content: beach[4], position: myLatLng});
var marker = new google.maps.Marker({position: myLatLng, map: map, title: beach[0], zIndex: beach[3], clickable: true, icon: beach[5]}))
google.maps.event.addListener(marker, 'click', function() {
infobulle.open(map, marker);
});
}
function setMarkers(map, locations) {
for (var i = 0; i < locations.length; i++) {
processBeach(locations[i]);
}
}

Have a look at my jSFiddle here. The code you are missing is
On Click you need to fetch the current infoWindow from the map and then update it with new information
If you want to keep windows open and close when people want to close then you have to set a toggle kind of variable so each window will be created on click and then when someone click on close it will go away. But i think you only need to complete first part.
The code you should look in my fiddle is from line 120 to 150 which does check for infowindow if it exists and then do open the same window on new marker so it moves from old marker and go to new. if you keep creating new windows the old ones will not close magically.
var map = $(this).gmap3("get"),
infowindow = $(this).gmap3({get:{name:"infowindow"}}); // Get current info window
if (infowindow){ // if infoWindow is there then use it else create new
infowindow.open(map, marker);
infowindow.setContent(context.data.ht);
jQuery("#customPopup").html(context.data.ht);
jQuery("#customPopup").show(500);
} else {
$(this).gmap3({
infowindow:{
anchor:marker,
options:{content: context.data.ht}
}
});
jQuery("#customPopup").html(context.data.ht);
jQuery("#customPopup").show(500);
}

How to make buttons to hide and show markers?

In Google maps, I want to have buttons that will hide and show map markers, but I need to have multiple buttons, each with their own set of markers. For example, button 1 would show and hide markers 1 and 3, while button 2 would show and hide markers 2 and 4.
It's kinda hard for me cause I'm new in api v3.
Here is my code.
function initialize() {
var mapDiv = document.getElementById('map-canvas');
var map = new google.maps.Map(mapDiv, {
center: new google.maps.LatLng(-8.762472, -63.887951),
zoom: 13,
mapTypeId: google.maps.MapTypeId.ROADMAP });
var marker = new google.maps.Marker({
map: map,
position: new google.maps.LatLng(-8.759662,-63.906489),
icon: predio});
var infowindow = new google.maps.InfoWindow({
content:contentimage})
google.maps.event.addListener(marker,'click',function(){
infowindow.open(map,marker); });
var marker1 = new google.maps.Marker({
map: map,
position: new google.maps.LatLng(-8.766159,-63.889567),
icon: yellow});
var infowindow1 = new google.maps.InfoWindow({
content:contentimage1})
google.maps.event.addListener(marker1,'click',function(){
infowindow1.open(map,marker1); });
}

You may like this
A Working Example Here.
function init()
{
// Icon urls for 4 icons
var bell="http://image1.png", cam="http://image2.png",
black="http://image3.png", green="http://image4.png";
// Image urls for 4 images
conimg1="http://contentImage1.jpg", conimg2="http://contentImage2.jpg",
conimg3="http://contentImage3.jpg", conimg4="http://contentImage4.jpg",
var map,
locations = [
[42.82846160000000000000, -76.53560419999997000000, bell, conimg1],
[43.65162010000000000000, -77.73558579999997000000, black, conimg2],
[44.75846240000000000000, -78.22252100000003000000, cam, conimg3],
[41.71773540000000000000, -75.74897190000002000000, green, conimg4]
],
myOptions = {
zoom: 6,
center: new google.maps.LatLng(locations[0][0], locations[0][1]),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var mapDiv = document.getElementById('map');
map = new google.maps.Map(mapDiv, myOptions);
var infowindow = new google.maps.InfoWindow(), marker, i, markers=[];
for (i = 0; i < locations.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][0], locations[i][1]),
map: map,
icon: locations[i][2],
visible:true
});
markers.push(marker)
google.maps.event.addListener(marker, 'click',(function(marker, i){
return function() {
var img="<img class='contentImage' src='"+locations[i][3]+"' />";
infowindow.setContent(img);
infowindow.open(map, marker);
}
})(marker, i));
}
var btn1=document.getElementById('btn1');
google.maps.event.addDomListener(btn1, 'click', function(){
if(markers[0].visible)
{
this.innerHTML="Show Icons (1 and 2)";
this.className="btn";
markers[0].setVisible(false);
markers[1].setVisible(false);
}
else
{
this.innerHTML="Hide Icons (1 and 2)";
this.className="btn btn-primary";
markers[0].setVisible(true);
markers[1].setVisible(true);
}
});
var btn2=document.getElementById('btn2');
google.maps.event.addDomListener(btn2, 'click', function(){
if(markers[2].visible)
{
this.innerHTML="Show Icons (3 and 4)";
this.className="btn";
markers[2].setVisible(false);
markers[3].setVisible(false);
}
else
{
this.innerHTML="Hide Icons (3 and 4)";
this.className="btn btn-primary";
markers[2].setVisible(true);
markers[3].setVisible(true);
}
});
}

GoogleMaps InfoWindow not appearing when Marker is clicked

I have three arrays : myLats, (latitudes) myLngs (longitudes) and myLocs (address strings)
e.g. myLats[0] = 53.3534751, ,myLngs[0] = -2.5682085, myLocs[0] = Longwood Rd Appleton Warrington. So the elements of each array all correspond to each other numerically.
When constructing the map in my initialize() function, I loop through these to place multiple markers at the correct coordinates, and i'm also trying to have each marker having an infowindow appear when clicked, yet when i click a marker an infowindow simply does not appear. Any help with this would be greatly appreciated.
Code:
function initialize() {
var myOptions = {
center: new google.maps.LatLng(54.00366, -2.547855),
zoom: 6,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById('map_canvas'), myOptions);
var marker, infowindow, i;
for (i = 0; i <= myLats.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(myLats[i], myLngs[i]),
map: map,
clickable: true,
icon: '". url::base() ."resources/icons/accident.png',
});
infowindow = new google.maps.InfoWindow({
content: myLocs[i],
});
google.maps.event.addListener(marker, 'click', function () {
infowindow.open(map, marker);
});
}
}

That's a common problem when dealing with more than one marker. You aren't in fact creating a new window for each marker but must redefining the single window for each marker.
You'll find the problem and solution on page 88 onwards of Google Map API V3
If you are new to Google Maps API, I would recommend reading that book, it gave me a great start and I avoided a lot of the "common" mistakes.
Hope this helps.
Jim

I made a few changes, like adding the markers inside a function, adding 'var', and changing i <= myLats.length to i < myLats.length. It was a combination of these changes that made it work.
var myLats = [ 54.20366, 54.42366, 54.64366];
var myLngs = [ -2.54788, -2.66788, -2.78788];
var myLocs = [ "Loc a" , "Loc b" , "Loc c"];
function initialize()
{
var myOptions =
{
center: new google.maps.LatLng(54.00366,-2.547855),
zoom: 6,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById('map_canvas'),myOptions);
var marker, infowindow, i;
for (i=0; i < myLats.length; i++)
{
addMarker(i);
}
function addMarker(i) {
var marker = new google.maps.Marker({
position: new google.maps.LatLng(myLats[i],myLngs[i]),
map: map,
clickable: true,
//icon: '". url::base() ."resources/icons/accident.png',
});
var infowindow = new google.maps.InfoWindow({
content: myLocs[i]
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker);
});
}
}
However, I'm guessing you want a solution that keeps only one infowindow open, I had this figured out first:
var myLats = [ 54.20366, 54.42366, 54.64366];
var myLngs = [ -2.54788, -2.66788, -2.78788];
var myLocs = [ "Loc a" , "Loc b" , "Loc c"];
var map, marker, infowindow, i;
function initialize()
{
var myOptions =
{
center: new google.maps.LatLng(54.00366,-2.547855),
zoom: 6,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('map_canvas'),myOptions);
infowindow = new google.maps.InfoWindow({ });
for (i = 0; i < myLats.length; i++) {
addMarker(i);
}
}
function addMarker(i) {
var marker = new google.maps.Marker({
position: new google.maps.LatLng(myLats[i],myLngs[i]),
map: map,
clickable: true
//icon: '". url::base() ."resources/icons/accident.png'
});
google.maps.event.addListener(marker, 'click', function(event) {
infowindow.setContent(myLocs[i]);
infowindow.open(map,marker);
});
}

Google Maps Marker as a link

I have the following code, but it is not working, the link only is showed on the last point (Argentina), some help?
<div id="map" style="width: 980px; height: 420px;margin:10px 0px 30px;"></div>
<script type="text/javascript">
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 2,
center: new google.maps.LatLng(0,0),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var usa = new google.maps.LatLng(37.09024, -95.712891);
var brasil = new google.maps.LatLng(-14.235004, -51.92528);
var argentina = new google.maps.LatLng(-38.416097, -63.616672);
var marker = new google.maps.Marker({
position: usa,
url: '/destinos/exibir/pais_id/3',
title: 'Estados Unidos',
map: map
});
var marker = new google.maps.Marker({
position: brasil,
url: '/destinos/exibir/pais_id/2',
title: 'Brasil',
map: map
});
var marker = new google.maps.Marker({
position: argentina,
url: '/destinos/exibir/pais_id/1',
title: 'Argentina',
map: map
});
google.maps.event.addListener(marker, 'click', function() {
window.location.href = marker.url;
});
</script>

jsfiddle demo with modification augmenting #hsz example:
The problem is you have marker declared 3 times, and attach only click event on the one that is declared last. So, you must declare 3 different name for 3 different markers and attach each of them with onclick event. Better if you do it in an array or something
var markers = [];
markers[0] = new google.maps.Marker({
position: usa,
url: '/destinos/exibir/pais_id/3',
title: 'Estados Unidos',
map: map
});
markers[1] = new google.maps.Marker({
position: brasil,
url: '/destinos/exibir/pais_id/2',
title: 'Brasil',
map: map
});
markers[2] = new google.maps.Marker({
position: argentina,
url: '/destinos/exibir/pais_id/1',
title: 'Argentina',
map: map
});
for ( i = 0; i < markers.length; i++ ) {
google.maps.event.addListener(markers[i], 'click', function() {
window.location.href = this.url; //changed from markers[i] to this
});
}

You're giving each marker the same variable name, so I think the reference 'marker' will only point to the last one (Argentina).
You could try giving them separate names and binding the listener to each one separately.

Just adding this answer for future reference for anyone if they need it
Send the details to another createMarker function
createMarker(pos,title,weburl)
{
marker = new google.maps.Marker({
position: pos,
title: title,
map: map
});
google.maps.event.addListener(marker, 'click', function() {
window.location.href = weburl;
});
}
Thanks Tom Elliott for pointing out the issue, i was using a logic similar to kjy112