I am using the Maps API (v3, javascript) to display a bunch of local properties for sale on this client's website. When the user mouses over a marker, it loads an infoWindow with property information. Problem is, when this is down near the edge of the map, it pans the map to show the info window, which can cause issues when lots of markers are close by.
So I added disableAutoPan: true to the infoWindow call, and it seems to solve the problem. However, after some more testing, if the user manually moves the map and then hovers over a marker, the resulting infoWindow pans the map. It's like it's ignoring the setting for the infoWindow.
Anyone else have this issue or any ideas how to solve it? The code I used to call the infoWindow is below:
infoWindowAjax = new google.maps.InfoWindow({
disableAutoPan: true,
maxWidth: '260'
});
Related
I'm working on embedding the google map, into a page, containing multiple iframes. It can happen, that I load 2 maps, into 2 different iframes at the same time. This is the reason why the Map API loaded only once, in the main document's head section:
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDY0kkJiTPVd2U7aTOAwhc9ySH6oHxOIYM&v=3&sensor=false" type="text/javascript"></script>
For loading the map inside the iframe, I wrote the following code, which runs inside the iframe:
var googleAPI = window.top.google;
var latLong = new googleAPI.maps.LatLng(31.7655374094844,93.515625);
var map = new googleAPI.maps.Map(document.getElementById("map-container"), {
zoom: 8,
center: latLong,
mapTypeId: googleAPI.maps.MapTypeId.ROADMAP
});
The map appears correctly on the page, without any errors. I also add a marker on the map and I want to allow the users to change the marker's position, by drag&drop
var simpleMarker = new googleAPI.maps.Marker({
position: latLong,
map: map,
draggable: true,
animation: googleAPI.maps.Animation.DROP,
title: 'Marker'
});
While under IE the marker's drag&drop without any problems, under Chrome&Firefox the drag it's not working as expected: sometimes the drag stops or you even get an endless drag.
My guess is that this is caused because the API was loaded in the main document, and after referenced from inside the iframes. I do not wish to change this, mostly because like I previously mentioned, I can have several maps on the page.
Is there a fix for the drag&drop issue?
I would appreciate any help you could give me,
Thanks
I don't have a solution, I'm afraid this kind of API-usage is not intended.
Take a look at the start of the API (https://maps.gstatic.com/intl/en_ALL/mapfiles/api-3/16/10/main.js)
(function(){'use strict';var k=window/*..more code..*/}).call(this);
This function will be called in the parent document of the iframe, the variable k(which will be used internally by the API as reference to the window-object) will always refer to the parent window of the iframe what will result in incorrect values when observing events (e.g. mousemove when you drag a marker) in the iframe.
I am working on a Google Map project. I need to accomplish something interactive. On the map, there will be lots of markers indicating different places and one place will be set as center. Clicking on the marker will pop up the infoWindow. On the infoWindow there will be a link named “NEXT”. Hitting that link will take the viewer to another marker place. It seems to be straight forward, so my question is there any API method to accomplish such task? Any help/suggestion will be highly appreciated.
Use the domready event of the infowindow to bind your click events, as described here.
var infoWindow = new google.maps.InfoWindow();
google.maps.event.addListener(infoWindow, 'domready', function() {
// whatever you want to do once the DOM is ready
});
Does anyone know how to create a custom Google Maps infoWindow That will just open and fill over the map completely, instead of paning the map and setting the bubble over the marker? Basically, what I'd like to do is have my markers on the map, then when a user clicks on a marker, it just opens the content in a panel that fits the entire map itself. I looked at the options mentioned here: link but none of these seem to do what I'd like, they still open a "bubble" type of window. Has anyone done this or can someone point me in the right direction?
Creating your custom info window is not so difficult, but it's a little bit complicated.
If you want to find the easiest way, I recommend InfoBubble library.
http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobubble/examples/example.html
If you want to just prevent map panning when the infoWindow open, you can specify an option:
var infoWnd = new google.maps.InfoWindow({
disableAutoPan : true
});
I know that many of us are writing code to open an InfoWindow when a marker is clicked. But the InfoWindow will stay in place until the upper-right X is clicked, which means that setting the associated Markervisibility to false will create what is essentially an orphaned InfoWindow. And there could be multiple InfoWindow instances displayed on the Map at the same time. I guess it's simple enough for the user to just click the InfoWindow closed, but it feels like hiding the Marker should hide the associated InfoWindow.
I have started writing code like the following to deal with this scenario:
google.maps.event.addListener( marker, "click", function() {
var bubble = new google.maps.InfoWindow({
content: buildBubbleContent( param1, param2 )
});
bubble.open( map, marker );
//pretty standard stuff to here, but the next line is new (for me):
google.maps.event.addListenerOnce( marker, "visible_changed", function() {
bubble.close();
});
});
Is this what everyone else is doing? It feels like a design pattern that should be called a ListenBack. I've never seen the issue addressed in the Google Maps docs. I can't help but think that there must be a simpler mechanism built into the InfoWindow to take care of this automatically. Is there a standard way to do this that I have just missed?
For a single infoWindow I always create it as a global during map initialization. My click event starts with:
if(infoWindow != null){
infoWindow.close();
}
infoWindow.setPosition(mouseEvent.latLng);
infoWindow.setContent("....");
// etc
I'm marking this question as answered, because I have continued scouring the docs and looking at many code samples, but haven't found any other solutions. There is certainly no facility provided with the InfoWindow to automatically remove it from the map when the associated marker is turned off. If anyone finds a better option later, I will happily mark their solution as the better answer.
I have many map markers with the exact same lat/long cords so no matter how far in I zoom my map still shows the marker cluster and the number of results.
Is there a way to have some onclick or onhover event so that it shows an info box with all of the markers in that cluster in a list? Then clicking a link within that info box opens up that individual marker info box?
I've read solutions to change the lat, long by a small amount so that they aren't the same location. I think that is very messy and not that good anyways if there ends up being multiple markers 10+ anyways at the same locationg. I think it'd be much easier for a user to just click the cluster and bring up the info window with all of those markers in there with links.
Or if someone knows another plugin that does what I am seeking I could work with that too. I just haven't found much info on it.
There might be a plug in out there to do what you want, but it's also possible to do without one. I did something like that in one of my projects.
Add event listener to each marker; clicking opens marker list info window
The content of the marker list info window contains onclick attributes that will open the marker info window.
My code was tucked away into functions, but it was basically just this:
//1) while creating marker, create click listener that opens the marker list
google.maps.event.addListener(marker, 'click', function() {
markerWindow.close();
markerList.open(map, marker);
});
//2) store the content required by the marker's info windows
var markers = [
[marker1Reference, "The Stadium"],
[maerker2Reference, "The Supermarket"]
];
//3) the function that is called each time a marker is chosen from the marker list
function openMarkerInfo(markerIndex) {
markerList.close();
markerWindow.setContent(markers[markerIndex][1]);
markerWindow.open(map, markers[markerIndex][0]);
}
//4) info window for the marker list - the content includes JS onclick events that will open each marker info window
markerList = new google.maps.InfoWindow({
content: "Choose:<br><br><div href='' class='markerLink' onclick='openMarkerInfo(0)'>The Stadium</div><br><div href='' class='markerLink' onclick='openMarkerInfo(1)'>My House</div>"
});
//5) the marker window that will get set each time a marker is clicked in the list
markerWindow = new google.maps.InfoWindow();
Hope that helps!