troubleshooting Question

Google Maps smartinfowindow position

Avatar of Orroland
OrrolandFlag for United Kingdom of Great Britain and Northern Ireland asked on
JavaScriptWeb DevelopmentWeb Components
6 Comments2 Solutions1288 ViewsLast Modified:
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 from the map canvas using Firefox inspector the map moves to the top left of the window and the viewport seems to extend to the width of the window which results in the smartinfowindows then being 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.

Below is the image of the smartinfowindow after clicking on the circled marker:
Map with smartinfowindow out of position
Here is the page when I have removed position: relative from the map canvas:
Map with position: relative removed from map canvas
Thanks for all help in advance.
ASKER CERTIFIED SOLUTION
Join our community to see this answer!
Unlock 2 Answers and 6 Comments.
Start Free Trial
Learn from the best

Network and collaborate with thousands of CTOs, CISOs, and IT Pros rooting for you and your success.

Andrew Hancock - VMware vExpert
See if this solution works for you by signing up for a 7 day free trial.
Unlock 2 Answers and 6 Comments.
Try for 7 days

”The time we save is the biggest benefit of E-E to our team. What could take multiple guys 2 hours or more each to find is accessed in around 15 minutes on Experts Exchange.

-Mike Kapnisakis, Warner Bros