Embed Google Map into HTML page based on GPS coordinates

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.


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


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

Tags:

Php

Google Maps

Recent Posts