Minimal How to Use Google Maps API With PHP

by kristian on October 21, 2006

Google MapsThe goal of this how to is to easily add multiple markes into the map on your own site using Google Maps API and PHP.

Google Maps API key

  1. If you don’t already have, sign up for the Google Account.
  2. Sign up for the Google Maps API key. Read at least the higlights from the Google Maps API terms. Sign up for your site, forexample http://www.mysite.com/

After sign up you’ll get your key and an example html code. If you lost your key anytime, you can sign up again for the same site and use a new key. You can also sign up for multiple sites keys if needed. You’ll get different key for each site.

JavaScript

To add multiple markers on your map we’ll use some basic PHP code. Google’s example code is a good starting point for this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
  Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="content-type" content="text/html;
    charset=utf-8"/>
    <title>Google Maps JavaScript API Example</title>
    <script src="http://maps.google.com/maps?
      file=api&amp;v=2&amp;key=ABCDEFGH..."
      type="text/javascript"></script>
    <script type="text/javascript">
    //<![CDATA[
    function load() {
      if (GBrowserIsCompatible()) {
        var map = new GMap2(
        document.getElementById("map"));
        map.setCenter(
        new GLatLng(37.4419, -122.1419), 13);
      }
    }
    //]]>
    </script>
  </head>
  <body onload="load()" onunload="GUnload()">
    <div id="map"
    style="width: 500px; height: 300px"></div>
  </body>
</html>

You have your API key on the html head and JavaScript to load on page load and div element to show the map. With map.setCenter(new GLatLng(37.4419, -122.1419), 13) you define the map’s center point and the zoom level. Here is an example.

To have some controls in the map, add this line into JavaScript load funtion:

map.addControl(new GSmallMapControl());

Add this JavaScript function to make markers:

function createMarker(point, text, title) {
  var marker = new GMarker(point,{title:title});
  GEvent.addListener(marker, "click", function() {
    marker.openInfoWindowHtml(text);
  });
  return marker;
}

Add marker with this code:

var marker = createMarker(
new GLatLng(37.4419, -122.1419),
'Marker text', 'Example Title text');
map.addOverlay(marker);

Note that you can add in the markers any html code like links and images for example. So, the code looks now like this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
  Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="content-type" content="text/html;
    charset=utf-8"/>
    <title>Google Maps JavaScript API Example</title>
    <script src="http://maps.google.com/maps?
      file=api&amp;v=2&amp;key=ABCDEFGH..."
      type="text/javascript"></script>
    <script type="text/javascript">
    //<![CDATA[
    function load() {
      if (GBrowserIsCompatible()) {
        var map = new GMap2(
        document.getElementById("map"));
        map.addControl(new GSmallMapControl());
        map.setCenter(
        new GLatLng(37.4419, -122.1419), 13);
        function createMarker(point, text, title) {
          var marker =
          new GMarker(point,{title:title});
          GEvent.addListener(
          marker, "click", function() {
            marker.openInfoWindowHtml(text);
          });
          return marker;
        }
        var marker = createMarker(
        new GLatLng(37.4419, -122.1419),
        'Marker text', 'Example Title text');
        map.addOverlay(marker);
      }
    }
    //]]>
    </script>
  </head>
  <body onload="load()" onunload="GUnload()">
    <div id="map"
    style="width: 500px; height: 300px"></div>
  </body>
</html>

Here is an example.

PHP

In order to add multiple markes, we’ll use some PHP to iterate over some marker points. Let’s use an array in this example, but you could get the marker points for example from database or xml file. Put the following lines around marker adding lines:

<?php
$points = Array(1 => "37.4389, -122.1389",
2 => "37.4419, -122.1419",
3 => "37.4449, -122.1449");
foreach ($points as $key => $point) {
?>
var marker = createMarker(
new GLatLng(<?php echo $point ?>),
'Marker text <?php echo $key ?>',
'Example Title text <?php echo $key ?>');
map.addOverlay(marker);
<?php } ?>

And here is the final code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
  Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="content-type" content="text/html;
    charset=utf-8"/>
    <title>Google Maps JavaScript API Example</title>
    <script src="http://maps.google.com/maps?
      file=api&amp;v=2&amp;key=ABCDEFGH..."
      type="text/javascript"></script>
    <script type="text/javascript">
    //<![CDATA[
    function load() {
      if (GBrowserIsCompatible()) {
        var map = new GMap2(
        document.getElementById("map"));
        map.addControl(new GSmallMapControl());
        map.setCenter(
        new GLatLng(37.4419, -122.1419), 13);
        function createMarker(point, text, title) {
          var marker =
          new GMarker(point,{title:title});
          GEvent.addListener(
          marker, "click", function() {
            marker.openInfoWindowHtml(text);
          });
          return marker;
        }
        <?php
        $points = Array(
        1 => "37.4389, -122.1389",
        2 => "37.4419, -122.1419",
        3 => "37.4449, -122.1449");
        foreach ($points as $key => $point) {
        ?>
        var marker = createMarker(
        new GLatLng(<?php echo $point ?>),
        'Marker text <?php echo $key ?>',
        'Example Title text <?php echo $key ?>');
        map.addOverlay(marker);
        <?php } ?>
      }
    }
    //]]>
    </script>
  </head>
  <body onload="load()" onunload="GUnload()">
    <div id="map"
    style="width: 500px; height: 300px"></div>
  </body>
</html>

And here is the final example.

If you have let’s say hundereds or thousands and more markers in your map, you might want to give a try to Clusterer. It is an excellent and easy to use JavaScript library by Jef Poskanzer.

This how to showed only very basic usage of Google Maps API. To learn more Google Maps API has a good documentation and Mike has many excellent examples of the basics and more andvanced stuff.

{ 11 comments… read them below or add one }

Normand Brisebois May 30, 2008 at 14:31

Your final code, just above on this page, works fine here.
But if I copy and paste the code into my BBEdit editor, save it and put it on the server where my web site is…..it does not work at all….I get a blank page.
I have tried saving the file under
markers.html
and also

markers.php….

I get the same bkank page in both cases
(I’m new to PHP)

I’ m stuck

Thanks.

Tim West December 31, 2008 at 07:25

hello.. i am looking for a tutorial to use the php and mysql database idea and also allow users to create there own custome markers or points.. and then feed this into the database and then feed it out…

Adam January 7, 2009 at 02:57

Hi, here is a fix to the code. It is working and tested. copy and paste into a php file. ** Make sure you sign up and add your own key or it will not work…

///////////////////////////////

Google Maps JavaScript API Example

//<![CDATA[
function load() {
if (GBrowserIsCompatible()) {
var map = new GMap2(
document.getElementById("map"));
map.addControl(new GSmallMapControl());
map.setCenter(
new GLatLng(37.4419, -122.1419), 13);
function createMarker(point, text, title) {
var marker =
new GMarker(point,{title:title});
GEvent.addListener(
marker, "click", function() {

marker.openInfoWindowHtml(text);
});
return marker;
}
"37.4389, -122.1389",
2 => "37.4419, -122.1419",
3 => "37.4449, -122.1449");
foreach ($points as $key => $point) {
?>
var marker = createMarker(
new GLatLng(),
'Marker text ',
'Example Title text ');
map.addOverlay(marker);
}
}
//]]>

Adam January 7, 2009 at 02:59

Sorry, the site didnt like the html code…. It is missing some at the top… if someone can tell me how to post code … I would be glad to post the fix. Or you can email me at adammochrie@gmail.com

sagarika January 22, 2009 at 09:03

hi,

this is html page code,but this code not working on php page.want to solve this problem.is this problem for css page calling in php?

thanks.

lala March 5, 2009 at 09:21

i just want to know where to find this 37.4389 number to represent what country or what state, to answer Normand Brisebois, you need an UNique API key to host it online and if u try on localhost then should be no porb…

Sean March 10, 2009 at 04:59

Make sure you add

onload=”load()” onunload=”GUnload()”

to the body tags.

eg:

RD April 3, 2009 at 16:25

Damn this is exactly the reference I needed, straight to the point! Thanks a lot :)

koushik chatterjee June 25, 2009 at 12:19

Thanks a lot. Your code works fine. Great job.

Prabhu November 12, 2009 at 06:43

It is very help to us… thanks lot

Asif Zia September 29, 2010 at 19:42

Perfect :) thanks …. looking for this since long.

Leave a Comment

{ 2 trackbacks }

Previous post:

Next post: