Optimizing the position of smart info windows in Google Maps

I am facing a challenge while attempting to switch the infowindow in Google maps to the smartinfowindow, as the position of the infowindow appears incorrect. This issue only occurs with the smartinfowindow and not with the standard infowindow.

Upon further investigation, I discovered that by removing 'position: relative' using Firefox inspector, the map shifts to the top left corner of the window, resulting in the smartinfowindows being correctly positioned.

Could there be something crucial that I am overlooking?

The markers are created using the following code:

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

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

Initially, I used the following code to create the infowindows:

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

While this method worked for standard infowindows, it seems to be causing alignment issues with the smartinfowindow.

Any assistance provided is greatly appreciated.

---- EDIT ----

Another issue has arisen with the smartinfowindow failing to close when opening another one. So far, I have been unsuccessful in resolving this matter. The solutions I've come across appear to be tailored for standard infowindows and do not apply to the smartinfowindow.

Once again, thank you in advance for any help offered.

Answer №1

In my opinion, the best way to modify smartinfowindow properties is by making edits directly in the smartinfowindow.js script.

Answer №2

I found a helpful solution on a platform called Experts Exchange.

Here's the solution for positioning Smartinfowindow:

The SmartInfoWindow creates a div to hold the infowindow content and attaches it to the body with absolute positioning. It assumes that your map is located in the top left corner of the document.

A simple fix involves changing the position of the SmartInfoWindow to be relative to the map canvas instead of the body. This requires editing the smartinfowindow.js file on line 178.

Replace this code:

document.body.appendChild(div);

With this code:

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

Make sure that "map" is the id of the div containing the map.

To prevent overlapping infowindows, you can remove the previous one when opening a new infowindow:

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

Incorporate this code:

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

This modification was included in my code to handle multiple infowindows effectively.

Note: Make sure jQuery is available on the page and no other Google Map plugins are creating divs within the map div.

Credits to tommyBoy from Experts Exchange for providing these solutions.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Video is not visible in safari browser initially, but becomes visible only after scrolling for a little while

Having issues with a video not displaying correctly in Safari? The problem is that the video only becomes visible after scrolling the browser window. Want to see an example of this issue in action? Click here and select the red bag. Check out the code sni ...

Effortlessly saving money with just one click

I have a search text box where the search result is displayed in a graph and then saved in a database. However, I am facing an issue where the data is being saved multiple times - first time saves properly, second time saves twice, third time three times, ...

Looking for guidance and bug assistance in HTML and JS, possibly involving PHP and MySQL. Can anyone offer advice?

I'm attempting to create an auto-complete feature for a forum (similar to the tags below) that will function within LimeSurvey. I am fairly new to this, so please provide explanations as if you were explaining it to a 5-year-old :) My objectives are: ...

CSS inline-block element disregarding margins and padding

Recently, I've been delving into the world of CSS and trying out "display:inline-block" as an alternative to "display:float". The general consensus from documentation is that properties commonly used on block elements can also be applied to inline-blo ...

Troubles with jQuery mobile functionality when utilizing hyperlink urls within a table

Currently, I am utilizing jQuery mobile to populate a table using ajax. One of the fields in the table is a hyperlink (href) that has a class assigned to it to trigger an alert on the screen. However, the alert does not appear when clicked: I have attempt ...

The HTML must be loaded prior to the execution of my JavaScript function

In the controller, there is a function that sets the true value to a variable. function setShow() { return this.isShow === 'Foo'; } The value of this.isShow is set to 'Foo' Within the template, there is <div ng-if = "vm.setShow( ...

AngularJS: How service query data is perceived as an object and therefore cannot be utilized by Angular

When retrieving data from my PHP server page in the factory service, I encountered two different scenarios: If I call a function that returns an array and then use json_encode($data); at the end, Angular throws a resource misconfiguration error due to ...

Enhance the connectivity of Angular js by activating the link function post transclusion

I am facing an issue with Angular where I have two directives that need to be transcluded within each other. However, I am unable to access the DOM using a simple JQuery selector after the transclude function has been executed. Specifically, I need to comp ...

Simple way to retrieve the first and last date of the current month using Node.js

I need help with retrieving the first and last date of the current month using the code below:- let currentDate = new Date(); let month = currentDate.getMonth() + 1; console.log(month); let firstDate = new Date(currentDate.getFullYear(), currentDate.getMon ...

When dealing with ReactJS, utilize the onChange event for handling updates to nested

I am currently learning ReactJS and struggling with a simple logic problem (I'm not very good at JS). I have a form that includes fields for name, email, and message. @ContactUsNew = React.createClass getInitialState: -> message: @props.mess ...

Encountering an error while trying to execute `$(document).ready(function() {}

Recently, I delved into the world of JavaScript, particularly Jquery. As I encountered the $(document).ready(function() {}); statement and added it to my code, I faced an issue when placing it within the header tag of my HTML. The script tag would display ...

How can I enhance this conversion function from an Array to an Object in JavaScript?

Looking to construct an object consisting of empty arrays using values as keys. const CATEGORIES = ['apple', 'banana', 'orange'] generateCategoryObject() === { apple: [], banana: [], orange: []} function generateCategoryO ...

The absence of color attribute in CSS serves as a safeguard against overriding

Issue Update: Upon pushing the application to the development server, ASP includes injected styles that are overriding the necessary custom styles. One specific example is a wrapper div with an 'a' tag that overrides all styled 'a' tags ...

No instances are returned by Processing.instances

I am experiencing an issue with a webpage that is running 2 processing sketches. I came across a suggestion to call Processing.instances[0].exit() in response to a question on dynamically unloading a Processing JS sketch from canvas. However, when I attem ...

Adding CSS code to my index.css file in React is not reflected in my application

I've been following a tutorial on YouTube about reactJS, and the YouTuber recommended importing a CSS file into index.css to properly style the website. However, when I tried copying the CSS code and importing it into both App.js and Index.js, nothing ...

Enumerated type alias in Typescript

Within my typings file, I have the following: declare namespace Somatic { enum PropType { html, object, css } } In a separate file named index.ts, I create a shorter alias for this enum like so: type PropType = Somatic.Pr ...

Responsive Div that Resizes Proportionally within Parent Container

Having a div element that adjusts its height based on width to maintain aspect ratio, I aim to place this div within another while maximizing available space vertically and horizontally without any cropping. It seems that object-fit: contain, typically use ...

Difficulty incorporating openId selector into Asp.Net MVC 2

I have been attempting to implement OpenID login functionality on a website using the openid selector JavaScript library. I am following the guidelines provided on this particular site. However, as someone who is not typically a web programmer, I am facing ...

AngularJS faces issue with view not reflecting changes made to model

A web-based game I am developing lets players bid on cards and trade them with one another. The technology stack for this application includes Node, Express, MongoDB, and Angular. The player avatars and names, along with their connection status, are displ ...

Troubleshooting problem with Angular Materials' md-datepicker not displaying correctly in wide browser windows

While using the md-datepicker component in my application, I noticed that it does not display properly on larger browser widths. It only seems to work as expected on small and x-small viewports. Please refer to the attached screenshot for reference. This ...