I have a google map api page that does not return the correct coordinates from the mouse event in firefox when the map div is not at the top left (0,0) of the browser window. If I put any css padding or margin on the map div, the mouseevent origin in google maps still starts from the top left of the browser window and not the map div. The mouseevent works correctly in IE & Chrome returning the correct lat/lng but not Firefox. Anyone have any suggestions to correct?
I created a very simple example at http://jsfiddle.net/fNPvf/15426/ that shows the coordinates as the mouse is moved over the map. You can see at the top left of the map image, the coordinates should be 0,0 but Firefox showing 50,50. The infowindow shows the correct lat/lng of the map center and you can see the difference in coordinates (50 pixel shift to top left) when you move the mouse to that point.
<html>
<head>
<meta charset="utf-8">
<style>
body {font:12px arial; margin:0px}
#map {
height:400px;
width:400px;
}
</style>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
<script>
var map;
coord = new google.maps.LatLng(38.939201, -94.747640)
function initialize() {
var mapOptions = {
zoom: 16,
center: coord
};
map = new google.maps.Map(document.getElementById('map'), mapOptions);
google.maps.event.trigger(map, 'resize');
var coordInfoWindow = new google.maps.InfoWindow();
coordInfoWindow.setContent('38.939201, -94.747640');
coordInfoWindow.setPosition(coord);
coordInfoWindow.open(map);
google.maps.event.addListener(map, "mousemove", function (event) {
document.getElementById("footer").innerHTML = "Mouse X Y:" + event.pixel.toString() + " - Lat Lng:" + event.latLng.toString() + "<br />"
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map" style="margin-left:50px;margin-top:50px;"></div>
<div id="footer" style="margin-left:50px; padding:10px;"></div>
</body>
</html>
Solution:
Add parameter v=3 once calling the google maps api. The fiddle provided by user4974882 is calling 3.exp - doesn't work.
Works:
<script src="https://maps.googleapis.com/maps/api/js?v=3"></script>
Live example
Doesn't work correctly:
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
<script src="https://maps.googleapis.com/maps/api/js"></script>
Live example
(both fiddles from user4974882)
Background:
The problem occured with Firefox Version 39. The Mozilla-team implemented some new functionality regarding offsetX/Y (https bugzilla.mozilla.org/show_bug.cgi?id=69787). Unfortunately the Google Maps API already somehow plays around with that (https code.google.com/p/gmaps-api-issues/issues/detail?id=8278) and so - once FF39 was rolled out - the problem popped up.
Problem with latest release of FF v39. Worked previously in v38.0.5.
I can confirm that the following is bugged, given a map with a fixed size and a 64px margin, "Hello World!" will only appear when you place the mouse pointer at -64,-64 relative to the marker. It appears that inside Maps, the pointer position is offset by the x/y of the map element relative to the top left corner of Firefox' client area
This issue has appeared in the last few days
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Simple markers</title>
<style>
#map-canvas
{
width: 640px;
height: 480px;
margin: 64px;
}
</style>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true"></script>
<script>
function initialize() {
var myLatlng = new google.maps.LatLng(-25.363882,131.044922);
var mapOptions = {
zoom: 4,
center: myLatlng
}
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: 'Hello World!'
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map-canvas"></div>
</body>
</html>
When creating a marker use the option {optimized:false}. It solves the issue in firefox 39.0.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Simple markers</title>
<style>
#map-canvas
{
width: 640px;
height: 480px;
margin: 64px;
}
</style>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true"></script>
<script>
function initialize() {
var myLatlng = new google.maps.LatLng(-25.363882,131.044922);
var mapOptions = {
zoom: 4,
center: myLatlng
}
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: 'Hello World!',
optimized: false
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map-canvas"></div>
</body>
</html>
As stated - this bug crept in with FF 39.
In your example, replace the v=3.exp parameter with just v=3
So it would be
src="https://maps.googleapis.com/maps/api/js?v=3"
Related
This question already has an answer here:
Google Maps Api V3 - Styling countries or cities
(1 answer)
Closed 5 years ago.
I want to show in my website only certain places using GoogleMap.It shouldn't show any small places.Only major places should be visilble in map.What is procedure to obtain this?
Set your lat/lon to the location of a post office (or other city indicator).
Then, use the zoom property to fix to the level you want to encompass.
See: https://developers.google.com/maps/documentation/javascript/examples/marker-simple
Here is the code form the example:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Simple markers</title>
<style>
/* Always set the map height explicitly to define the size of the div
* element that contains the map. */
#map {
height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
height: 100%;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
function initMap() {
var myLatLng = {lat: -25.363, lng: 131.044};
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 4,
center: myLatLng
});
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
title: 'Hello World!'
});
}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
</script>
</body>
</html>
Try that script at map.zoom = 16. Should be close to city view. London I think.
You can also set map bounds, but that is a lot harder. You would need to find your location, then plot geometry around that area, define the points, and then, zoom all points into view.
All of this is possible, but you showed me no code, so I'm not showing any back.
Hope you found something useful,
I'm trying to create a map and load .kmz file using the following code:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no"> <meta charset="utf-8">
<style type ="text/css"> html, body, #map-canvas { height: 100%; margin: 0px; padding: 0px}</style>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?libraries=visualization&key=mykey"></script>
<script type="text/javascript">
function initialize() {
var myOptions = {
center: new google.maps.LatLng(58.33, -98.52),
zoom: 11,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var kmzLayer = new google.maps.KmlLayer('link_to_kmz_file');
kmzLayer.setMap(map);
}
</script>
</head
<body>
<div id="map_canvas"> </div>
</body
</html>
The problem comes up when nothing is loaded and I have no idea why it happens. I should mention my API_KEY is valid, since I use it for creating another maps that does not require .kmz file loading, and I also do not store the .kmz file on localhost but on my own server.
I'd appreciate it if anyone could point me to the solution.
Thanks in advance.
In your HTML, you are using:
<div id="map_canvas"></div>
and in your CSS:
#map-canvas {
...
}
Issue: map-canvas ≠ map_canvas
Since the map needs a height to be displayed, your map won't show until you correct your CSS like hereafter:
#map_canvas {
...
}
+ You need to correct your closing </head> and </body> tags.
+ You need to call the initialize() function.
Add this to your javascript:
google.maps.event.addDomListener(window, 'load', initialize);
you aren't calling initialize() anywhere, just declaring it. Add it to the body onload if you want to call it when body loaded.
<body onload="initialize()">
also your closing body tag is incomplete
</body>
and your closing head tag
</head>
add after your function like this
`<script type="text/javascript">
function initialize() {
var myOptions = {
center: new google.maps.LatLng(58.33, -98.52),
zoom: 11,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var kmzLayer = new google.maps.KmlLayer('link_to_kmz_file');
kmzLayer.setMap(map);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>`
Try this
google.maps.event.addDomListener(window, 'load', initialize);
I have some working code to display a KML layer on Google maps. When you click on the various parts of the layer their respective name pops up in an info window.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#map-canvas { height: 100% }
</style>
<script type="text/javascript"
// Load Google Maps API
src="https://maps.googleapis.com/maps/api/js?key=XXXXXXXXXXX&sensor=false">
</script>
<script type="text/javascript">
function initialize() {
var myLatlng = new google.maps.LatLng(51.875696, -0.624207);
var mapOptions = {
zoom: 6,
center: myLatlng
};
var map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
var kmlLayer = new google.maps.KmlLayer({
url: 'http://XXXXXXX.org/gliding/grid3.kml',
suppressInfoWindows: false,
map: map
});
google.maps.event.addListener(kmlLayer, 'click', function(kmlEvent) {
var text = kmlEvent.featureData.name;
showInContentWindow(text);
});
function showInContentWindow(text) {
var sidediv = document.getElementById('content-window');
}
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map-canvas" style="width:100%; height:100%; float:left"></div>
</body>
</html>
I would like the info window to also contain a link to a page with the same name as object clicked on. For example if the user clicks on a shape in the KML layer called Tom the info window says Tom Click Here. If the user clicks the link they are taken to www.XYZ.com/Tom.
I'm sure this is quite simple, but I'm new to javascript and can't get it to work.
This is more a hack than a solution (which means google could change a property name and this would stop working.
However, here you go
google.maps.event.addListener(kmlLayer, 'click', function(kmlEvent) {
var text = kmlEvent.featureData.name;
kmlEvent.featureData.infoWindowHtml += 'Click Here';
showInContentWindow(text);
});
my (cut down) code is as below. My markers are not showing up until I either click or move the map slightly... is there any way of getting around this so they show up instantly?
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>TSF - Labour Plan </title>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"> </script>
<script type="text/javascript">
function initialize() {
var centerlatlng = new google.maps.LatLng(53.644638, -2.526855);
var myOptions = {
zoom: 6,
center: centerlatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var latlng = new google.maps.LatLng(51.752927, -0.470095);
var img = "https://dl.dropboxusercontent.com/u/55888592/tsf-logo.gif";
var info = "<img style = 'float: left' src='http://www.tsf.uk.com/wp-content/themes/default/images/tsf-logo.gif'><div style = 'float: right; width: 200px'><p><b>Job Number:</b> </p><p><b>Client:</b> ASDA</p><p><b>Location:</b> HEMEL HEMPSTEAD</p><p><b>Postcode:</b> HP2 4AA</p><p><b>Start Time:</b> 22:0</p><p><b>No of Men:</b> 10.0</p><p><b>Allocated Labour:</b> AB: 5.0, WK: 5.0, : , : , : , : </p><p><b>Job Information: </b>PICK UP TOOLS</div>";
var infowindow = new google.maps.InfoWindow({
});
var marker = new google.maps.Marker({
icon: img,
position: latlng,
map: map,
content: info
});
marker.setMap(map);
google.maps.event.addListener(marker, "click", function(content) {
infowindow.setContent(this.content);
infowindow.open(map,this);
});
}
google.maps.event.addDomListener(window, "load", initialize);
</script>
</head>
<body style="margin:0px; padding:0px;" onload="initialize()">
<div id="map_canvas" style="width: 100%; height: 100%;"></div>
</body>
</html>
It seems that the problem is still exists in google chrome in most recent version on google map api and marker cluster js.
So I'll post the code which helped in this issue for me.
google.maps.event.addListener(map, 'zoom_changed', function() {
setTimeout(function() {
var cnt = map.getCenter();
cnt.e+=0.000001;
map.panTo(cnt);
cnt.e-=0.000001;
map.panTo(cnt);
},400);
});
feel free to play with value of interval of 400 (in my case less than 400 woudn't fix problem, but higher value - higher lag time)
P.S.
make sure you have defined map variable:
map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
I was struggling with the EXACTLY same problem and was so glad to hear other guys have the same problem. I experienced the problem with GMaps V3 in Safari and Firefox as well. I tried your solution and it works for me as well but I used the idle event instead the timeout:
google.maps.event.addListener(map, 'idle', function(event) {
var cnt = map.getCenter();
cnt.e+=0.000001;
map.panTo(cnt);
cnt.e-=0.000001;
map.panTo(cnt);
});
Just add it on initializing Google Maps. There might come up another issue working with infowindows and circles bound to markers. In my case I can set the radius of the circle in the infobox. Jumping out of the input field (with or without changing the radius value) makes red-like markers blue. If you then zoom in/out the original color reappears. To solve this problem you have to change the zoom level quickly (in radius_changed event):
map.setZoom(map.getZoom()-1);
map.setZoom(map.getZoom()+1);
I've resolved this calling repaint on markerclusterer variable twice:
mc.repaint();
map.fitBounds(bounds); // for centering within the marker bounds
mc.repaint(); // repaint for getting it fixed
Hope this helps to anyone still facing the issue.
As per Geocodezips comment, this seems to be a local issue.
Hi i am new to google street view api and javascript. i am trying to write a code through which i can rotate the image in street view at a particular longitude and latitude. the angle doesn't matter....here is the code
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Street View service</title>
<link href="/maps/documentation/javascript/examples/default.css" rel="stylesheet">
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script>
//this for loop is for rotating the image.
for(var i=0;i<15;i++) {
function initialize() {
var fenway = new google.maps.LatLng(42.345573,-71.098326);
var mapOptions = {
center: fenway,
zoom: 14,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(
document.getElementById('map-canvas'), mapOptions);
var panoramaOptions = {
position: fenway,
pov: {
heading: 0+10*i,
pitch: 10
}
};
var panorama = new google.maps.StreetViewPanorama(document.getElementById('pano'),panoramaOptions);
map.setStreetView(panorama);
//this loop is for waiting the image to load..i know this is not efficient but just wanted to give ample time for image to load
for(var k=0;k<10000;k++){}
}
google.maps.event.addDomListener(window, 'load', initialize);
}
</script>
<div id="pano" style="position:absolute; left:10px; top: 8px; width: 1300px; height: 670px;"></div>
<div id="map-canvas" style="left:1100px; top: 450px;width: 200px; height: 200px"></div>
when i execute the whole code..only a image at particular angle comes..it doesn't rotate.
Can you please help me? :)
Take a look at my question and myself answer at this link. It doesn't rotate interactively, but the street view view is set for watching the point at lat,long. I hope it is what you need.
Google Maps Api StreetView PanoramaOptions Point of View Setting from Lon Lat