Solved

Google Maps smartinfowindow position

Posted on 2013-11-27
6
903 Views
Last Modified: 2013-11-28
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);
}

Open in new window


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

Open in new window


Originally I created the infowindows using:

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

Open in new window


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.
0
Comment
Question by:Orroland
  • 4
  • 2
6 Comments
 

Author Comment

by:Orroland
ID: 39680357
If it helps I was working from the example here
0
 

Author Comment

by:Orroland
ID: 39680842
I have found a solution where I have just added a value to the top and left position set in the smartinfowindow.js file to position the window on the marker
0
 

Author Comment

by:Orroland
ID: 39681029
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.
0
Highfive + Dolby Voice = No More Audio Complaints!

Poor audio quality is one of the top reasons people don’t use video conferencing. Get the crispest, clearest audio powered by Dolby Voice in every meeting. Highfive and Dolby Voice deliver the best video conferencing and audio experience for every meeting and every room.

 
LVL 38

Accepted Solution

by:
Tom Beck earned 500 total points
ID: 39683710
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.
0
 
LVL 38

Assisted Solution

by:Tom Beck
Tom Beck earned 500 total points
ID: 39683756
This may work in your case for closing any opened SmartInfoWindows when you open another.

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

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

Author Closing Comment

by:Orroland
ID: 39683797
Thanks for the help, both solutions worked perfectly :-)
0

Featured Post

Free Trending Threat Insights Every Day

Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

Join & Write a Comment

I made this because I wanted to get e-mail with a attached csv file so I'd would be able to import user input into a MS Excel template, but I also wanted to register/save all inputs from each day in a file on the server. 1st - It creates a temp C…
Any business that wants to seriously grow needs to keep the needs and desires of an international audience of their websites in mind. Making a website friendly to international users isn’t prohibitively expensive and can provide an incredible return…
Viewers will get an overview of the benefits and risks of using Bitcoin to accept payments. What Bitcoin is: Legality: Risks: Benefits: Which businesses are best suited?: Other things you should know: How to get started:
Explain concepts important to validation of email addresses with regular expressions. Applies to most languages/tools that uses regular expressions. Consider email address RFCs: Look at HTML5 form input element (with type=email) regex pattern: T…

760 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

18 Experts available now in Live!

Get 1:1 Help Now