I have a Google v3 Map with a UI element that overhangs the top of it like so…
And I have an info window attached to multiple markers. The problem I have is that when the infowindow opens and auto-pans to be visible within the map (behaviour I want), it obviously takes no account of the element overhang…
…so the user has to manually pan to see all the info clearly or get at the close box.
I've looked to see if there is a way I can get the offsetTop of the infowindow from its parent map, so I can add an extra panTo nudge when necessary, but I'm stumped.
Attempts such as…
google.maps.event.addListener(marker, 'click', function() {
infowindow.setContent(this.html);
infowindow.open(map, marker);
var infoTop = infowindow.offsetTop;
console.log(infoTop);
});
…just give me undefined.
What would be great is to be able to set a clearance property on the infowindow, as is possible with the infoBoxClearance property of the InfoBox utility. But I don't want to use InfoBox because there are stylistic aspects of the standard infowindow I prefer.
And I would prefer not to have the map pan more than is necessary by using disableAutoPan and calculating an optimal panTo for each marker.
Any suggestions?
I haven't tried this in Version 3, but in Version 2 the standard solution is to create a custom control on the map. The [v2] infoWindow avoids all controls, including custom controls. Your custom control could simply be an empty space covered by your external UI.
http://code.google.com/apis/maps/documentation/javascript/controls.html#CustomControls
Related
I am drawing a set of Polygons on to Google Maps and would like to have an InfoWindow pop up at the center of each when I click on it.
function attach_info_window(polygon, centroid, title){
var info_window = new google.maps.InfoWindow({
content: title,
position: { lat: centroid[0], lng: centroid[1] }
});
google.maps.event.addListener(polygon, 'click', function() {
info_window.open(map, this);
});
}
The problem is, the window shows up in the NW corner every time. The 'position' parameter seems to be ignored completely. I also tried setting the position on click with
event.latLng
But that returns undefined, even though the API docs specify it, so that doesn't work either. Curiously, it works just fine if I use a Marker instead of the Polygons.
I solved this by removing the second argument in open()
info_window.open(map)
works great. I was passing "this" in order to bind it to that specific polygon among many. I still don't understand why this works, and neither
info_window.open(map, poly)
nor
info_window.open(map, this)
works
This:
info_window.open(map, this);
Will not work for anything but a google.maps.Marker. The second argument of InfoWindow.open can only be a google.maps.Marker, a Polygon or Polyline won't work there.
from the documentation
"In the core API, the only anchor is the Marker class. However, an anchor can be any MVCObject that exposes a LatLng position property"
I have a google map with a bunch of markers on it. Some of those markers have the same lat/lon as other markers, so sit on top of each other. I'm using the oms library to allow for the markers to be spiderfied out so each marker can be clicked.
All working great so far. However the only way you can tell if there's multiple markers is by clicking on the markers, which is a problem for my application.
Is there a way to indicate which markers are grouped into 'spiderfy' clusters?
I'm also using the MarkerClustererPlus library to handle clusters. It could be possible to use the clusterer library to provide a count and then 'on click' spiderify the markers but I couldn't figure out how to do that.
If you check this example it has spiderfy and cluster plugins mixed and working smoothly. But my problem is I am using google map API with markercluster and OverlappingMarkerSpiderfier plugin. I was also looking for if we can use leaflet cluster plugin for google map? Thank you very much.
You can use a listener to check if the marker is spiderfiable or not. If it is spiderfiable, it means that there are others elements under that pin.
google.maps.event.addListener(marker, 'spider_format', function(status) {
if(status == OverlappingMarkerSpiderfier.markerStatus.SPIDERFIED
|| status == OverlappingMarkerSpiderfier.markerStatus.UNSPIDERFIABLE)
{
marker.setIcon('Markers/marker.png');
//use a normal marker if the element is already spiderfied
//or if it can not be spiderfied
}
if(status == OverlappingMarkerSpiderfier.markerStatus.SPIDERFIABLE)
{
marker.setIcon('Markers/cluster_marker.png'); //use a different marker
}
});
I have trouble with my google map script where the markers on a same location overlapped and not visible to user. I tried to edit my script using OverlappingMarkerSpiderfier available in this link https://github.com/jawj/OverlappingMarkerSpiderfier. But overlapping issue exist.No improvement occured.
The below function binds a popup window with marker.I have edited the function to remove overlapping of markers in the same location using OverlappingMarkerSpiderfier.
function bindInfoWindow(marker, map, infoWindow, contentString)
{
var oms = new OverlappingMarkerSpiderfier(map);
oms.addMarker(marker);
oms.addListener(marker, 'mouseover', function() {
infoWindow.setContent(contentString);
infoWindow.open(map, marker);
$("#tabs").tabs();
});
}
// highlighting a marker
Below is the jsfiddle link of my edited google map.Please show me where iam doing wrong.
http://jsfiddle.net/7AKuX/11/
You create a new oms-instance for each marker, use the same instance for all markers instead:
http://jsfiddle.net/5VFeJ/
Google map developer api provide clustering method to see overlapped markers and its contents. Refer to this link, or else use OverlappingMarkerSpiderfier.
I am developing an application which uses google maps api v3 to show markers and infowindows.
Well, I have N markers stored within an array and a global infowindow used to show some information.
The infowindow contents are shown simply by clicking a marker, created in this way:
/* global js stuff */
var g_map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
var g_current_popup = new google.maps.InfoWindow({ content: "" });
var g_markers = [];
/* create marker function */
function addMarker(p_infowindow_contents)
{
var l_marker = new google.maps.Marker( all the stuff needed );
google.maps.event.addListener(l_marker, 'click', function()
{
g_current_popup.close(); // if already open, it must be closed and reloaded
g_current_popup.setContent(p_infowindow_contents);
g_current_popup.open(g_map, l_marker);
});
g_markers.push(l_marker);
}
Everything works as expected, except for a little graphical glitch: when the infowindow is appearing, I see the infowindow 'tip' positioned at an unknown location for a tenth of a second, then it disappears and I see the correct infowindow.
Look at this screenshot took just before the tip disappears:
Does anyone experienced something like this?
Could it be some CSS issue?
Thanks
It does not look like this is a problem with your code, I think it more likely a browser issue. I was able to validate the same thing looking at the infowindow example that Google provides in Firefox, but not in Chrome:
https://developers.google.com/maps/documentation/javascript/examples/infowindow-simple
it seems to happen more visibly when the map has to scroll to fit the infowindow, but I would say that it is not a requirement for it to do so. It is likely just an artifact with the screen taking a few clock cycles to catch up with the DOM.
I am new to Google Maps programming, and I want to :
add a pushpin onclick
get the clicked point location
in addition, I want to code this in javascript(&jquery)
In fact, here is an example of what I mean
http://www.gorissen.info/Pierre/maps/googleMapLocation.php
so, can anyone provide me with information about how I can code it?
Kind regards!
GEvent is Maps API 2 which is deprecated. You should be using Maps API 3 instead (especially if you're starting out 'new' and not having to maintain an old API 2 site). And when you do, something like this should work:
google.maps.event.addListener(map, 'click', function(event) {
var marker = new google.maps.Marker({
position: event.latLng,
map: map
});
});