23

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.

ensnare
  • 40,069
  • 64
  • 158
  • 224

3 Answers3

43

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&amp;v=2&amp;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:

Using the Static Maps API

Community
  • 1
  • 1
Daniel Vassallo
  • 337,827
  • 72
  • 505
  • 443
4

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

Luca Rocchi
  • 6,272
  • 1
  • 23
  • 23
1

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.

streetlogics
  • 4,640
  • 33
  • 33