Menu
I have a PHP photo gallery that reads the GPS coordinates from images. 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.
984
Embed a map or directionsClick Share or embed map. Click Embed map. Copy the text in the box. Paste it into the HTML of your website or blog.
The following are a few examples that you may help you getting started:
<!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.
<!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.
<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:
198
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
