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

What is the top choice for creating a shallow copy of an array

While delving into the vue source code today, I stumbled upon a method of writing that left me puzzled. view source const deduped = [...new Set(pendingPostFlushCbs)] My initial thought is that it is a shallow copy of the array. But why is there a need t ...

Generating a tag next to an entry field using material-ui's TextField and getInputProps

In my project, I am utilizing a material-ui TextField to design an input alongside a label for a typeahead picker component using downshift. After exploring the demos, I have implemented the following code snippet: <FormControl fullWidth className={cl ...

What is the most effective way to transfer an array from one PHP file to a different JavaScript file?

Utilizing AJAX to send a request to another php page and retrieve the result of a query, I originally used xmlhttprequest to pass the php logic along with the query information. However, I wanted to separate the presentation logic from the actual code logi ...

Is there a way to keep my fixed footer container from moving while zooming in and out on a webpage

Is there a way to prevent the bottom text from shifting when zoomed in or out on the page? The rest of the content remains stable, but due to using position:absolute for this section to stay at the bottom of another div (content), it causes movement. #con ...

Any suggestions on how to secure my socket connection following user authentication in redux?

After onSubmit, userAction.login is called which then dispatches "SUCCESS_AUTHENTICATE" to set the token of the user and socket state in their respective reducers. How can I proceed to trigger socket.emit("authenticate", {token})? ...

Designing a fluid dropdown menu with scroll functionality for my website

I have been trying to implement a scrollable dropdown menu on my website by following various tutorials, but none of them seem to be working. Despite my efforts, the dropdown menu remains non-scrollable. HTML <li> <a href="#">Team ...

attempting to link to an external style sheet hosted on Amazon S3

I am working on creating a widget or snippet of a website that can easily be added to another webpage by including a script tag for my JavaScript file hosted on Amazon S3 and a div element where content will be inserted. Even though I have uploaded the C ...

Deactivate a form on the page while another form is being used

My issue involves having two forms on the same web page with identical IDs, and I'm unable to easily change them. Both forms are necessary on the page. When I submit one form, it also submits the other form as blank, resulting in duplicate submission ...

What is the standard practice in AJAX for determining a specific state during page loading?

Since I started diving into the world of serious ajax operations, one question has been on my mind. Let me illustrate with an example. Imagine fetching a standard HTML page for a customer from the server. The URL could look like this: /myapp/customer/54 ...

Showcasing PHP variables within HTML using jQuery

I am currently looking for the best way to showcase information stored in a PHP variable, retrieved from a MySQL database. My initial thought was to use jQuery. Here are my questions: When a user inputs a number into a field, I receive that Member' ...

Enhancing the appearance of the CSS panel with Font Awesome icons

I need help adding a fontawesome or any other icon to my CSS3 based sliding panel button. The icon should change from open to close when clicked on. Any ideas on how to achieve this would be greatly appreciated! * { margin:0; padding:0; font-famil ...

Using JavaScript to organize and categorize data within an array

I am working with a multidimensional array and need to filter it based on the value at a specific index position. Here is what the array looks like: arr = [ [1 , 101 , 'New post ', 0], [2, 101 , 'New Post' , 1], ...

Pass the initial value from a parent component to a child component in ReactJS without the need for state management

Initially, I have a parent Component A that calculates an initial value for its child Component B. The initial value is computed in the componentDidMount() of Component A and passed to B using props: <ComponentB initialValue={this.state.value} handleCha ...

Tips for fixing the "Uncaught TypeError: Cannot access property 'get' of undefined" error in Vue.JS 2

Here is my component: methods: { reloadMessage() { setTimeout(function () { this.$http.get(window.BaseUrl + '/message/inbox'); }, 1500); } } And here are my routes: Route::group(['prefix' => &ap ...

The issue with Array.prototype.join in Internet Explorer 8

In my current working scenario, I encountered an issue with the following code snippet. It performs well in the latest versions of Internet Explorer (IE), but the join function fails to work correctly in IE 8 Version. <!DOCTYPE html> <html xmlns= ...

Dealing with redirecting to the login page in Angular

I recently started working with Angular and I feel completely lost. My initial task involves making a simple Rest-GET request, but the destination is located behind an external login page. This results in my request being redirected to the external page a ...

Is there anyone who can assist in refining the padding and margin issues within this Galleria.js implementation?

I am struggling to understand why the padding and margins around the images in this slideshow theme on PregoApp are uneven. Despite my attempts to adjust the CSS, the issue persists. You can view the site here. Another website using the same implementati ...

Discover the best method for sending multiple API requests to Vuex store using Nuxt middleware

I am having trouble figuring out how to make multiple API calls to Vuex store from Nuxt middleware. I have successfully implemented it for a single API call, but I can't seem to get it working for multiple APIs. // middleware/log.js import axios fro ...

Modifying the HTML <select> element with JavaScript

[resolved] I'm encountering an issue with the code below that is supposed to dynamically change the options in a second drop-down menu based on the selection made in the first menu. I've tried to troubleshoot the problem but haven't been suc ...

Deletion of a custom function in JavaScript

I have written some basic code to generate and remove an image using functions. Specifically, I need help with removing the image created by the function Generate() when a button linked to the function Reset1() is clicked. Here's the code snippet for ...