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.
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 readed many question, map help, product forums and so on... but I never find the answer just this "It is not possible". I can't believe it.
So how can I set the default zoom level on an embed Google Map?
Now I have this link for my map: https://mapsengine.google.com/map/edit?mid=zV4QqQ0y5KZs.kFj05lIIpS5s
I was tried thi z=10 parameter in the URL, it doesn't work. Is there any other parameter, or maybe something JavaScript tricks to set up the zoomlevel? Or something other HTML parameter like data-zoom or something...?
It seems the &z=nn parameter now works.
Try this:
https://mapsengine.google.com/map/viewer?mid=zV4QqQ0y5KZs.kFj05lIIpS5s&z=10
I use this code to initialize my map:
var map;
function initialize() {
var mapOptions = {
zoom: 6,
center: new google.maps.LatLng(40, -3),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
That's centered in Spain.
The new embedded google maps do not have the Z index more, you have to first set the zoom level you want on the google maps site, and afther that click on the setting button and get the iframe code for the zoomed map.
You can not change the zoom level in the setting window, that is why you have to zoom the map first directly in the google maps.
Than paste this code in your html page and it should work, at least this worked for me.
thanks for reading.
I've been using the JS version of the Maps v3 API and I can get Geocoding/Directions/Map Markers and all that going but for some reason on this particular map I want in the sidebar of my client's site, the map seems to not load properly.
I've reverted the JS to the simple sample code on the API documentation and even then, it's still not working. (For my screenshot I added 'disableDefaultUI: true' for mapOptions)
I can't mousewheel scroll to zoom.
I can't click and drag with the mouse.
The logo and fine print are showing at the top (usually at the
bottom)
I can right click and see a context menu (not normal).
I just don't know why the map won't work on this particular page. Is the map_canvas dimensions too small or something? (231px x 231px).
Have you seen or heard of this issue before?
Check if you have the console open, as it can break the map.
When testing, keep the console closed to see results and reopen it, the refresh to see logs.
This sucks, but it is better than pulling your hair out for no reason.
try this code may be help this..
<script language="javascript" type="text/javascript">
var geocoder;
var map;
$(document).ready(function() {
initialize();
}
function initialize() {
geocoder = new google.maps.Geocoder();
var latlng = new google.maps.LatLng(40.77627, -73.910965);
var myOptions = {
zoom: 8,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
}
</script>
html
<div id="map_canvas">
</div>
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
Hey, I just started using Google maps, and am having a problem. Adding overlays is working fine. If I add controls (zoom, left/right etc.), they are also working fine. But Googlemaps isn't allowing me to drag, even if I set map.enableDragging(). It also won't respond to any of my GEvent.addListeners. I've looked on other sites, and there's supposed to be a hand icon on mouseover to drag and click and such, and all I have is my pointer. Am I doing something wrong? Parts of my code:
The declaration of the map. EnableDragging is supposed to be default, and it's not even working when I call the function to set it to true.
Boozemap.map = new GMap2( $('#map_mapholder').get(0));
Boozemap.map.enableDragging();
The function to add a marker, which makes the marker show up, but not be interactive:
Boozemap.addBCMarker = function(lat, lng)
{
var point = new GLatLng(lat, lng);
var icon = new GIcon();
icon.image = absoluteFilepath("images/fstar.png");
icon.iconSize = new GSize(25, 25);
icon.iconAnchor = new GPoint(140, 25);
var bcmarker = new GMarker(point, icon);
GEvent.addListener(bcmarker, 'click', function(){alert('clicked!')});
Boozemap.map.addOverlay(bcmarker);
}
Any and all help would be lovely, thanks!
I figured it out, but it's kind of weird. The majority of my map was indeed getting covered, but it was getting covered by the copyright div that's built into the google API. I'm pretty sure I can fix it through CSS, but it seems strange that google would mess up like that, so I'm assuming I did something wrong. Is there a google maps API CSS that I'm supposed to include, or something?
Thanks to all those who helped.