Embed Google Map into HTML page based on GPS coordinates
I have a PHP photo gallery that reads the GPS coordinates from i开发者_如何学运维mages. I'd like to modify it to use the coordinates and include a google map on the photo page. Is there a simple way to display a google map on an HTML page by supplying just this pair of information?
Thanks.
The following are a few examples that you may help you getting started:
Using the Google Maps API v2:
<!DOCTYPE html>
<html>
<head>
<script src="http://maps.google.com/maps?file=api&v=2&sensor=false"
type="text/javascript"></script>
</head>
<body onunload="GUnload()">
<div id="map" style="width: 400px; height: 300px"></div>
<script type="text/javascript">
var map = new GMap2(document.getElementById("map"));
map.setCenter(new GLatLng(51.49, -0.12), 8);
</script>
</body>
</html>
You simply need to change the latitude and longitude in the GMap2.setCenter() method. The last paramater is the zoom level.
Using the Google Maps API v3:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript"
src="http://maps.google.com/maps/api/js?sensor=false"></script>
</head>
<body>
<div id="map" style="width: 400px; height: 300px"></div>
<script type="text/javascript">
var myOptions = {
zoom: 8,
center: new google.maps.LatLng(51.49, -0.12),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map"), myOptions);
</script>
</body>
</html>
When using version 3 of the Maps API, you would need to pass your parameters as options to the google.maps.Map() constructor. The above example should be self explanatory.
Using the Static Map API:
<img src="https://maps.google.com/maps/api/staticmap?center=51.49,-0.12&zoom=8&size=400x300&sensor=false" style="width: 400px; height: 400px;" />
The Static Map API, as luca suggested might be a very good idea.
Simply pass the the latitude and longitude paramaters in an image tag, as in the example above. It would display the map below, directly rendered from Google:
use static google map you have to supply just some other addition info
http://maps.google.com/maps/api/staticmap?center=51.477222,0&zoom=14&size=400x400&sensor=false
it only show an image of the map
here is a link to the API
https://developers.google.com/maps/documentation/maps-static/intro
there is a lot of other options if needed
Since you're using PHP, you could also use the PHP Google Map API class, which has also just been updated to use V3 of the Google Maps JS APIs.
加载中,请稍侯......
精彩评论