Jackson Jackson - 5 months ago 164
jQuery Question

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!!

Answer

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);    
}
Comments