I'm trying to make a homepage on my mobile website where a google map of my current position stays in the background while icons float over it. The only way to do this is to use a static image of the map, but I can't figure out a way to pull out a static map of my current position. Anyone know how to do this?
+1
A:
Not sure that's "the only way" to do what you want. But if you want to get a static map of your current position, you can do the following:
- Get position with
navigator.geolocation(available on newer web browsers) - Construct static map url with returned coordinates
- Use static map image somewhere on your site.
Here is code (run by <body onLoad="setBgMap()">) which will set a page's background image to a map of your current position:
function handler(location) {
var ll, url;
ll = [location.coords.latitude, location.coords.longitude].join(',');
url = "http://maps.google.com/maps/api/staticmap?center=" + ll + "&markers=" + ll + "&zoom=14&size=400x400&sensor=false";
document.body.background = url;
}
function setBgMap() {
navigator.geolocation.getCurrentPosition(handler);
}
tcarobruce
2010-07-12 23:26:28
worked perfectly, thank you so much!
MapWeb
2010-07-13 01:39:37