Minimal How to Use Google Maps API With PHP

20 Comments / Google, PHP / By

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.

20 thoughts on “Minimal How to Use Google Maps API With PHP”

  1. Normand Brisebois

    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.

    Reply
  2. Tim West

    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…

    Reply
  3. Adam

    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);
    }
    }
    //]]>

    Reply
  5. sagarika

    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.

    Reply
  6. lala

    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…

    Reply

  11. Pingback: Googlemap markers тай цуг дуудах нь « Ezida's Blog

  12. Pingback: Google api maps static

  15. Naina

    i want to search nearest location from my database.whereas my database have a table in which i have saved list of deals with latitude and longitude.
    For this should i need Google maps or it could be done with query .
    Thanks in Advance

    Reply
  17. Krishna

    Nice example …. but here i am getting a problem like … i want to change cursor position … bcz my cursor is too top but i want my cursor position should be bottom.. how can i change the position

    Reply

Leave a Comment

Your email address will not be published. Required fields are marked *

Scroll to Top