Adding a Google Map to a Drupal 7 page

Recently I needed to add a Google Map to a contact page, which led me to have a read of the new V3 API Google has released.  Previously you needed to get a key and mess around a bit - but now you simply add the Javascript to the page and you're good to go.  Unfortunately I couldn't just modify the <head> section of the page.tpl.php file as its now hidden away in /modules/system/html.tpl.php and included in each rendered page... so copy this file to your theme and modify it there (I understand you can rename it in a similar way to renaming custom node templates, so it will have a specific one for the contact page - but I couldn't get this working so I've used a test to see if we are on the Contact page instead).

The following code gets added to the new copied html.tpl.php file, just below the <?php print $scripts; ?> line, and adds some more Javascript to build the maps when the function initialize() is called.  We'll call this with an equally dirty hack shown below.

Ok, so the main code is here... its modified and extended from the basic tutorial Google provides on its JavaScript API page.  I'm using two maps as the company I was testing this for has two offices, and I've added markers to show where the offices are.  The lattitude and longitude have been 'x'd out to protect the innocent... just add the lat/long you want to display.

 

  <?php if (substr($head_title, 0, 10) == "Contact Us") { ?>
    <script type="text/javascript"
      src="http://maps.googleapis.com/maps/api/js?sensor=false">
    </script>
    <script type="text/javascript">
      function initialize() {
        var latlng_auck = new google.maps.LatLng(-3x.xxx, 17x.xxx);
        var latlng_chch = new google.maps.LatLng(-4x.xxx, 17x.xxx);
        var myOptions_auck = {
          zoom: 15,
          center: latlng_auck,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        var myOptions_chch = {
          zoom: 15,
          center: latlng_chch,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        };

        var map_auck = new google.maps.Map
            (document.getElementById("map_auck"), myOptions_auck);
        var map_chch = new google.maps.Map
            (document.getElementById("map_chch"), myOptions_chch);

        var marker_auck = new google.maps.Marker({
          position: latlng_auck,
          map: map_auck,
          title: "Auckland Office" });
        var marker_chch = new google.maps.Marker({
          position: latlng_chch,
          map: map_chch,
          title: "Christchurch Office" });
      }
    </script>
  <?php } ?>

 

This script can be made to run when the page loads by adding onload="initialize()" into the <body> tag found lower down in the html.tpl.php file - so the line in question looks something like:

<body onload="initialize()" class="<?php print $classes; ?>"
    <?php print $attributes;?>>

This causes any page who's title doesn't begin with "Contact Us" to have an error - but browsers will just ignore it... it feels dirty, and I should only include it if needed, but this is just a proof of concept, so it will do for now.

And finally you need the code in your page to display the map.  This requires some raw HTML, and something like <div id="map_auck">&nbsp</div> would do the trick.


Hope that helps someone.

help with your script

 

Hi Steve,

i am have been trying to replicate the above but my page is not display any map.

Actually i can see the map for half a second and then it disappears.

 

I can see no errors in the page using the web tools (i.e. from Firefox), however no page is display in the map.

If i look at the page source i can see the javascript code, and if i add some "alert" i can see the code is being executed.

Again, using alert at the end of the function below, i can see that map_chch is holding a value (and not null).

 

Have I placed the javascript below in the wrong place?

 

Should it go before or after the <?php print $page; ?> section?

 

The page in drupal has the following code:

<div id="map_chch">

<p> maphere </p>

</div> 

 

Text Format: Full HTML

 

I have modified my html.tpl.php to look like this:

 

<?php ?>

  <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false">

  </script>

  <script type="text/javascript">

    function initialize() {

 var latlng_chch = new google.maps.LatLng(47.174589, 8.513854);

 

      var myOptions_chch = {

        zoom: 7,

        center: latlng_chch,

        mapTypeId: google.maps.MapTypeId.ROADMAP

      };

 

 

      var map_chch = new google.maps.Map

          (document.getElementById("map_chch"), myOptions_chch);

    }

  </script>

<?php ?>

 

I have also added the onload so that is like this

<body onload="initialize()" id="body" class="<?php print $classes; ?>" <?php print $attributes;?>>

</body>

 

Thanks a lot for any help

Andrea

Hi Andrea, It looks like it

Hi Andrea, It looks like it should work... although you could remove the <?php ?> tags since they include nothing.

Have you tried using the Firebug console?  I find sometimes that shows up Javascript errors that the Chrome one doesn't (assuming you're using Chrome).  Also, does this happen in all browsers?  Or just one? 

One of the worst things to trace I have found re: Javascript failures on a page is unclosed brackets (both round brackets and curly ones)... maybe do a double check that they are all properly balanced.

Sorry I can't be more help, but the code does, at first glance, appear correct.

Cheers

Steve

Hi

Excellent comments

thank you

thank a lot for your effort

You're welcome, cheers

You're welcome, cheers

quality writing skill

I'm extremely impressed with your writing skills and also with the layout on your weblog. Is this a paid theme or did you modify it yourself? Anyway keep up the nice quality writing, it is rare to see a nice blog like this one nowadays.. wesdf

I developed it myself from

I developed it myself from scratch... its starting to feel a little dated to me now but I'm too busy to change it : )  Glad you like the blog, keep reading...

Steve

Post new comment

The content of this field is kept private and will not be shown publicly.
  • You can enable syntax highlighting of source code with the following tags: <code>, <blockcode>, <drupal6>, <html>, <java>, <javascript>, <php>, <python>. The supported tag styles are: <foo>, [foo], [[foo]].
  • Syntax highlight code surrounded by the <pre class="brush: lang">...</pre> tags, where lang is one of the following language brushes: bash, cpp, css, jscript, java, php, python.

More information about formatting options

CAPTCHA
This question is to prevent automated spam submissions. Upper or lower case does not matter. If you can't read it properly, just submit what you believe it says and if its wrong you will be presented with a new captcha image.
Image CAPTCHA
Enter the characters shown in the image.