We Keep Coding

Custom info window for google maps?

I'm trying to create a custom info window for google maps.
I have sort of succeeded with one exception! Basically, the main info window is still visible and I have no idea how to remove it or hide it.
This is a working FIDDLE
And this is what I am following: custom info window
I have this code as mentioned in the link above:
// Reference to the DIV which receives the contents of the infowindow using jQuery
var iwOuter = $('.gm-style-iw');
/* The DIV we want to change is above the .gm-style-iw DIV.
* So, we use jQuery and create a iwBackground variable,
* and took advantage of the existing reference to .gm-style-iw for the previous DIV with .prev().
*/
var iwBackground = iwOuter.prev();
// Remove the background shadow DIV
iwBackground.children(':nth-child(2)').css({'display' : 'none'});
// Remove the white background DIV
iwBackground.children(':nth-child(4)').css({'display' : 'none'});
But this doesn't seem to do anything as you can see in my Fiddle.
Could someone please advise on this issue?
Any help would be appreciated.
Thanks in advance.
Edit:
I think I'm getting somewhere.
I've created a custom Function and put all the code for the removing the background in it. and then I call the customFunction(); right after html='' stuff.
But the issue is that it won't work for the first click but it will work for second click or third click etc...
I've updated the FIDDLE here
any suggestions?
SECOND EDIT:
Getting very close.
https://jsfiddle.net/8yL2vhoe/3/
If you click on one marker and then click on the second one you would see the result that I am looking for. (no background for the main popup).
I just don't understand why it doesn't work for the first click!!

Please see your updated Fiddle here.
Just move the var html = "..."; and var iw = new google.maps.InfoWindow({...}) outside of your marker's click listener.
The click listener for the marker could be made simpler as below:
var activeInfoWindow;
function infoWindow(marker, map, title, address, url) {
var html = "...";
var iw = new google.maps.InfoWindow({
content: html,
//maxWidth: 350
},customFunction());
google.maps.event.addListener(marker, 'click', function () {
if (activeInfoWindow != null) activeInfoWindow.close();
iw.open(map, marker);
activeInfoWindow = iw;
customFunction();
});
}
Also, your createMarker() function should be applied as
function geocodeAddress(locations, i) {
var title = locations[i][0];
var address = locations[i][1];
var url = locations[i][2];
geocoder.geocode({
'address': locations[i][1]
},
function (results, status) {
if (status == google.maps.GeocoderStatus.OK) {
createMarker(results, url, title, address);
} else {
alert("geocode of " + address + " failed:" + status);
}
});
}
function createMarker(results, url, title, address) {
var marker = new google.maps.Marker({
icon: url,
map: map,
position: results[0].geometry.location,
title: title,
animation: google.maps.Animation.DROP,
address: address,
url: url
});
infoWindow(marker, map, title, address, url);
bounds.extend(marker.getPosition());
map.fitBounds(bounds);
}

Loading animation in Google maps infowindow

I have developed this http://weathermap.cloudcontrolled.com/ from where you can click on a place and get the current weather details in it. Everything is working properly but its getting small delay after click on a place to show weather. For that I would like to show a small loading animation inside the infowindow and after the weather data available it will show the weather in the same infowindow. How to do this. (this is pure html/js site, you can view source code by pressing ctrl+u)

Yes. Get an animated icon from http://www.ajaxload.info/, call it ajaxicon.gif
Change your map click event to :
google.maps.event.addListener(map, 'click', function(event) {
//call function to create marker
if (marker) {
marker.setMap(null);
marker = null;
}
// why do you recreate the marker over and over ??
marker = createMarker(event.latLng, 'name', '<img src="ajaxicon.gif">');
getWeather(event.latLng.lat(),event.latLng.lng(),function (data) {
infowindow.setContent("<b>"+data.list[0].name+"</b><br>"+data.list[0].weather[0].description+"<br><center><img src=http://www.openweathermap.com/img/w/"+data.list[0].weather[0].icon+".png></center>");
});
});
create the marker, place animated ajax-icon in the infoWindow through your createMarker function
on success / callback, replace infowindow content with actual weather content

You could also try the following
google.maps.event.addListener('click', showLoading);
function showLoading(event) {
var contentString = '<img src="images/loading.gif">';
infoWindow.setContent(contentString);
infoWindow.setPosition(event.latLng);
getWeather(event.latLng.lat(),event.latLng.lng(),function (data) {
contentString = "<b>"+data.list[0].name+"</b><br>"+data.list[0].weather[0].description+"<br><center><img src=http://www.openweathermap.com/img/w/"+data.list[0].weather[0].icon+".png></center>"
infowindow.setContent(contentString);
});
infoWindow.open(map);
};

Map not adding click event handlers to markers

The code below will add markers to my map. But the add Listener event never gets added to each marker.
var mapDiv = document.getElementById("google-map");
var infowindow = new google.maps.InfoWindow({
content: 'test'
});
var map = new google.maps.Map(mapDiv);
map.setCenter(new GLatLng(53.635784, 6.943359));
map.setZoom(5);
for (var i = 0; i < data.length; i++) {
var dataMarker = data[i];
var marker = new GLatLng(dataMarker.Latitude, dataMarker.Longitude);
map.addOverlay(new google.maps.Marker(marker, {
title: dataMarker.Name,
html: dataMarker.HtmlAttributes[0]
}));
google.maps.event.addListener(marker, 'click', function () {
infoWindow.setContent(this.html);
infoWindow.open(map, this);
});
}
What am I doing wrong?
Oh and I am using Maps v2.

You did not add any listener to marker.
var marker = new GLatLng(dataMarker.Latitude, dataMarker.Longitude);
marker is not a google.maps.Marker , it's a google.maps.LatLng , which will not respond to mouse-events, because it's not an UI-element, it's just a javascript-object

You created event listeners which are most probably connected with last marker.
You have to link info window with marker in separate function. Last part of your code should be written as:
addEventListener(marker, infoWindow, map);
}
function addEventListener(marker, infoWindow, map) {
google.maps.event.addListener(marker, 'click', function () {
infoWindow.setContent(marker.html);
infoWindow.open(map, marker);
});
}
See also An array of infoWindow in Google maps api and link with explanation about closures.

It looks like you have a mix of v2 and v3 code in that snippet, and so the whole thing is unlikely to work.
For example, you're using new google.maps.Infowindow (v3) in the same place as GLatLng.
My suggestion would be to change the bootstrap on the page to v3, and delete any references to v2 objects (like GLatLng). Make sure you're loading the API like this:
<script src="//maps.googleapis.com/maps/api/js?…"></script>

How to display newer Google Map InfoWindows on top of older ones

I am having Google Map with InfoWindows being added dynamically. The issue is, when two InfoWindows overlap, the recent one won't always be on top of older ones.
How can I make sure latter InfoWindow always show up on top of all other InfoWIndows using Javascript/jQuery?
The InfoWindows are added when I receive new images and coordinates through websocket. Here is my code:
function addToMap(image) {
console.log("In addToMap...");
coordinates = image[2].split(',');
pin=new google.maps.LatLng(coordinates[0], coordinates[1]);
if(marker) {
marker.setMap(null);
}
var markerIcon = image_car_icon;
marker=new google.maps.Marker({
position:pin,
zIndexProcess: function( m )
{
return 9999999 + pin_count;
},
icon:markerIcon
});
marker.setMap(map);
map.setCenter(marker.getPosition());
pin_count++;
if(image[0] != "NOP") {
popup = new google.maps.InfoWindow({
content:'<image id="pin_' + pin_count + '" src="data:image/png;base64,' + image[1] +'"/>',
});
popup.open(map, marker);
}
}
popup is the InfoWindow created when I get a new image. Suppose two images have almost same coordinates, I want the second InfoWindow to be on top (z-index). But, most of the time, the first window stays on top.

I have found out a solution. I am manually modifying the z-index of the marker by using the image as the handle. marker_count is a running marker, so the z-index will be greater than the previous marker.
google.maps.event.addListener(popup, 'domready', function() {
console.log("DOM READY...........................");
// Bring latest Image to top
e = $('#pin_' + img_count).parent().parent().parent().parent();
e.css({
'z-index' : (99999 + marker_count),
});
});

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'>";