Geek Answers Handbook

Open Google Maps InfoWindow based on specific criteria.

I want to open Google Maps InfoWindow depending on whether one of my buildings emits a building signal. Buildings that have markers have alarm conditions (on or off), and if they are in an alarm state, I change the color of the marker to yellow or red, depending on the severity of the alarm. When alarms are red alarms, the marker is animated with the effect google.maps.Animation.BOUNCE .

The bounce effect is sometimes not enough to attract attention (we leave this screen open on the wall, and the data in div $(this).children(".alarm-count") below changes dynamically due to another script that we run on the site in background mode.

I already know how to change markers based on alarm state, can I also open InfoWindow in the same state? I tried this:

  google.maps.event.addListener(map,'idle',(function(marker,i){ return function(){ infowindow.setContent( '<div class="infowindow-inner">'+ '<a href="'+bldgGfx[i]+'" onclick="window.open('+bldgGfx[i]+');return false;" target="_blank" title="'+bldgName[i]+' ('+bldgAddr[i]+')">'+ '<h2>'+bldgName[i]+'</h2>'+ '<h4>'+bldgAddr[i]+'</h4>'+ '<p>'+mainMeter[i]+' kW</p>'+ '<p>'+alarmCount[i]+' Alarms</p>'+ '</div>' );infowindow.open(map,marker); } })(marker,i));

but it does not seem to work.

Long and short - I need to evaluate one value per marker on my page and open (or not open) InfoWindow for each building based on this value.

Here is my code:

 $(".building").each(function(i){ bldgNo[i] = $(this).children(".bldg-no").html().slice(1); bldgName[i] = $(this).children(".bldg-name").html(); bldgAddr[i] = $(this).children(".bldg-address").html(); bldgGfx[i] = $(this).children(".bldg-graphic").html(); mainMeter[i] = $(this).children(".main-meter").html(); alarmCount[i] = $(this).children(".alarm-count").html(); latitude[i] = $(this).children(".latitude").html(); longitude[i] = $(this).children(".longitude").html(); if (alarmCount[i]!="N/A"){alarmCount[i]=alarmCount[i].slice(0,-3);} if (alarmCount[i]>"0" && alarmCount[i]!="N/A"){ marker=new google.maps.Marker({position:new google.maps.LatLng(latitude[i],longitude[i]),map:map,shadow:shadow,icon:redIcon,title:bldgName[i]+" \n"+bldgAddr[i],optimized:false});marker.setAnimation(google.maps.Animation.BOUNCE); //// //// THE COMMAND TO OPEN THE INFOWINDOW WILL GO HERE, RIGHT? //// } else if ($(this).hasClass("new")||(mainMeter[i]=="N/A")||(!isNumber(mainMeter[i]))) { marker=new google.maps.Marker({position:new google.maps.LatLng(latitude[i],longitude[i]),map:map,shadow:shadow,icon:yellowIcon,title:bldgName[i]+" \n"+bldgAddr[i],optimized:false});marker.setAnimation(google.maps.Animation.NULL);} else { marker=new google.maps.Marker({position:new google.maps.LatLng(latitude[i],longitude[i]),map:map,shadow:shadow,icon:greenIcon,title:bldgName[i]+" \n"+bldgAddr[i],optimized:false});marker.setAnimation(google.maps.Animation.NULL);} markersArray.push(marker); google.maps.event.addListener(marker,'click',(function(marker,i){ return function(){ infowindow.setContent( '<div class="infowindow-inner">'+ '<a href="'+bldgGfx[i]+'" onclick="window.open('+bldgGfx[i]+');return false;" target="_blank" title="'+bldgName[i]+' ('+bldgAddr[i]+')">'+ '<h2>'+bldgName[i]+'</h2>'+ '<h4>'+bldgAddr[i]+'</h4>'+ '<p>'+mainMeter[i]+' kW</p>'+ '<p>'+alarmCount[i]+' Alarms</p>'+ '</div>' );infowindow.open(map,marker); } })(marker,i)); i++; });
+4
source share
1 answer

Since many buildings can be "on standby," you need an InfoWindow array (in my demo, it's global because I use the built-in call); however, the screen can be cluttered very easily. I wrote a Z-Index routine to bring InfoWindow click to the front. You can also consider MarkerWithLabel or InfoBubble , because in my opinion they look better than InfoWindow vanilla.

Please see the demo.

demonstration side by side with code

I only copy parts that are very different.

 var infowindows = []; function initialize() { map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions); // MANY LINES SKIPPED // ... $(this).children(".longitude").html(); infowindows[i] = new google.maps.InfoWindow({ content:'<div class="infowindow" onclick="bringToFront('+i+')">'+bldgName[i]+'</div>'}); if (alarmCount[i]>0 && alarmCount[i]!="N/A"){ // marker=new google.maps.Marker({position:new google.maps.LatLng(latitude[i],longitude[i]),map:map,shadow:shadow,icon:redIcon,title:bldgName[i]+" \n"+bldgAddr[i],optimized:false});marker.setAnimation(google.maps.Animation.BOUNCE); marker = new google.maps.Marker({position:new google.maps.LatLng(latitude[i],longitude[i]),map:map,title:"red"}); infowindows[i].open(map,marker); //// THE COMMAND TO OPEN THE INFOWINDOW WILL GO HERE, RIGHT? } ... google.maps.event.addListener(marker,'click',(function(marker,i){ return function(){ infowindows[i].open(map,marker); bringToFront(i); } })(marker,i)); }); } function bringToFront(windowIndex) { console.log(windowIndex); for (var i = infowindows.length-1, n = 0; i >= n; i--) { infowindows[i].setZIndex(0); } infowindows[windowIndex].setZIndex(1); }
+2
source

More articles:


All Articles