google maps smartinfowindow position

Question

I am trying to change the infowindow in Google maps to the smartinfowindow but for some reason the position of the infowindow is wrong. I never had this issue with the standard infowindow, only the smartinfowindow.

I have found that if I remove position: relative using Firefox inspector the map moves to the top left of the window and the smartinfowindows are then in the correct position.

So is there something I'm missing?

I create the markers with the following:

for (var i = 0; i < data.locations.length; i++) {

    var dataPhoto = data.locations[i];
    var latLng = new google.maps.LatLng(dataPhoto.latitude,dataPhoto.longitude);

latlngbounds.extend( latLng );

var marker = new google.maps.Marker({
    position: latLng,
    icon: 'http://www.irishcottageholidays.com/images/cottage1.png'
}); 

listenMarker(map,marker,InfoWindow,dataPhoto.mID)

    markers.push(marker);
}

And then to create the smartinfowindow:

function listenMarker (map,marker,InfoWindow,mID){
google.maps.event.addListener(marker, 'click', function() {
    load_content(map,this,InfoWindow,mID);
});

function load_content(map,marker,InfoWindow,mID){
    var $j = jQuery.noConflict();
    $j.ajax({
        type : 'GET',
        url : '/ajax/map_popup.asp',
        data: {
            mID : mID
        },
        success: function(result){
            new SmartInfoWindow({position: marker.getPosition(), map: map, content: result});
        }
    });
}

Originally I created the infowindows using:

InfoWindow.setOptions({
    disableAutoPan: true,
    maxWidth: 280
});
InfoWindow.setContent(result);
InfoWindow.open(map, marker);

And this worked but now I've changed to the smartinfowindow, it loads the infowindow but not in the right position.

Thanks for all help in advance.

---- EDIT ----

I now have an issue with the smartinfowindow not closing when opening another and have been unable to achieve this so far. Everything I've found so far seem to apply to the standard infowindows and don't work on the smartinfowindow.

Thanks again for all help in advance.

Answer 1

I've managed to get a solution through Experts Exchange.

Smartinfowindow position solution:

SmartInfoWindow creates a div to contain the content of the infowindow and appends it to the body. It's position is set to absolute relative to the body. It assumes your map is in the top left corner of the document.

The simple solution is to absolute position the SmartInfoWindow relative to the map canvas instead of the body. To do this you must edit the smartinfowindow.js file on line 178.

Instead of:

document.body.appendChild(div);

Replace with:

var mapDiv = document.getElementById("map");
mapDiv.appendChild(div);

With "map" as the id of the div that holds the map.

Remove smartinfowindow when opening a new one:

function listenMarker (map,marker,InfoWindow,mID){
    google.maps.event.addListener(marker, 'click', function() {
        if ($('#map > div').length > 1) { $('#map >div:last-child').remove(); }
        load_content(map,this,InfoWindow,mID);
    });
}

Where:

if ($('#map > div').length > 1) { $('#map >div:last-child').remove(); }

was added to my code

It assumes you have jquery on the page already and no other google map add-ons are creating divs inside the map div.

All credit to tommyBoy on Experts Exchange for both solutions.

Answer 2

I believe you should change smartinfowindow properties by editing the smartinfowindow.js file.