Home/ Questions/Q 687095
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-14T02:05:31+00:00

I have a PHP photo gallery that reads the GPS coordinates from images. I’d

  • 0

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.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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

    • 0