6 min read

Customizing Google Maps

Google Maps has a comprehensive API for interacting with maps on your website. MooTools can be used to load the Google Maps engine at the correct time. It can also act as a bridge between the map and other HTML elements on your site.

To get started, you will first need to get an API key to use Google Maps on your domain. You can sign up for a free key at http://code.google.com/apis/maps/signup.html. Even if you are working on your local computer, you still need the key. For instance, if the base URL of your Joomla installation is http://localhost/joomla, you will enter localhost as the domain for your API key.

Once you have an API key ready, create the file basicmap.js in the /components/com_js folder, and fill it with the following code:

window.addEvent('domready', function() 
{
 if (GBrowserIsCompatible())
 {
  var map = new GMap2($('map_canvas'));
  map.setCenter(new GLatLng(38.89, -77.04), 12);
  window.onunload=function()
  {
   GUnload();
  };
 }
});

The entire script is wrapped within a call to the MooTools-specific addEvent() member function of window. Because we want this code to execute once the DOM is ready, the first parameter is the event name ‘domready’. The second parameter is an anonymous function containing our code.

What does the call to function() do?
Using function() in JavaScript is a way of creating an anonymous function. This way, you can create functions that are used in only one place (such as event handlers) without cluttering the namespace with a needless function name. Also, the code within the anonymous function operates within its own scope; this is referred to as a closure. Closures are very frequently used in modern JavaScript frameworks, for event handling and other distinct tasks.

Once inside of the function, GBrowserIsCompatible() is used to determine if the browser is capable of running Google Maps. If it is, a new instance of GMap2() is declared and bound to the HTML element that has an id of ‘map_canvas’ and is stored into map. The call to $(‘map_canvas’) is a MooTools shortcut for document.GetElementById().

Next, the setCenter() member function of map is called to tell Google Maps where to center the map and how far to zoom in. The first parameter is a GLatLng() object, which is used to set the specific latitude and longitude of the map’s center. The other parameter determines the zoom level, which is set to 12 in this case. Finally, the window.onunload event is set to a function that calls GUnload(). When the user navigates away from the page, this function removes Google Maps from memory, to prevent memory leaks.

With our JavaScript in place, it is now time to add a function to the controller in /components/com_js/js.php that will load it along with some HTML. Add the following basicMap() function to this file:

function basicMap()
{
 $key = 'DoNotUseThisKeyGetOneFromCodeDotGoogleDotCom';
 JHTML::_('behavior.mootools');
 $document =& JFactory::getDocument();
 $document->addScript('http://maps.google.com/maps?file=api&v=
      2&key=' . $key);
 $document->addScript(
 JURI::base() . 'components/com_js/basicmap.js');
 ?>
 <div id="map_canvas" style="width: 500px; height: 300px"></div>
 <?php
}

The basicMap() function starts off by setting $key to the API key received from Google. You should replace this value with the one you receive at http://code.google.com/apis/maps/signup.html. Next, JHTML::_(‘behavior.mootools’); is called to load MooTools into the <head> tag of the HTML document. This is followed by getting a reference to the current document object through the getDocument() member function of JFactory. The addScript() member function is called twice—once to load in the Google Maps API (using our key), then again to load our basicmap.js script. (The Google Maps API calls in all of the functions and class definitions beginning with a capital ‘G’.)

Finally, a <div> with an id of ‘map_canvas’ is sent to the browser. Once this function is in place and js.php has been saved, load index.php?option=com_js&task=basicMap in the browser. Your map should look like this:

Using JavaScript Effects with Joomla!

We can make this map slightly more interesting by adding a marker to a specific address. To do so, add the highlighted code below to the basicmap.js file:

window.addEvent('domready', function() 
{
 if (GBrowserIsCompatible())
 {
   var map = new GMap2($('map_canvas'));
   map.setCenter(new GLatLng(38.89, -77.04), 12);
   
   var whitehouse = new GClientGeocoder();
   whitehouse.getLatLng('1600 Pennsylvania Ave NW',
   function(latlng)
   {
    marker = new GMarker( latlng );
    marker.bindInfoWindowHtml('<strong>The White
    House</strong>');
    map.addOverlay(marker);
   }); 
   window.onunload=function(){
   GUnload();
  };
 }
});

This code sets whitehouse as an instance of the GClientGeocoder class. Next, the getLatLng() member function of GClientGeocoder is called. The first parameter is the street address to be looked up. The second parameter is an anonymous function where the GLatLng object is passed once the address lookup is complete. Within this function, marker is set as a new GMarker object, which takes the passed-in latlng object as a parameter. The bindInfoWindowHTML() member function of GMarker is called to add an HTML message to appear in a balloon above the marker. Finally, the maker is passed into the addOverlay() member function of GMap2, to place it on the map.

Save basicmap.js and then reload index.php?option=com_js&task=basicMap. You should now see the same map, only with a red pin. When you click on the red pin, your map should look like this:

Using JavaScript Effects with Joomla!

Interactive Maps

These two different maps show the basic functionality of getting Google Maps on your own website. These maps are very basic; you could easily create them at maps.google.com then embed them in a standard Joomla! article with the HTML code they provide you. However, you would not have the opportunity to add functions that interact with the other elements on your page. To do that, we will create some more HTML code and then write some MooTools-powered JavaScript to bridge our content with Google Maps.

Open the /components/com_js/js.php file and add the following selectMap() function to the controller:

function selectMap()
{
 $key = 'DoNotUseThisKeyGetOneFromCodeDotGoogleDotCom';
 JHTML::_('behavior.mootools');
 $document =& JFactory::getDocument();
 $document->addScript('http://maps.google.com/maps?file=api&v
   =2&key=' . $key);
 $document->addScript(
 JURI::base() . 'components/com_js/selectmap.js');
 ?>
 <div id="map_canvas" style="width: 500px; height: 300px"></div>
 <select id="map_selections">
 <option value="">(select...)</option>
 <option value="1200 K Street NW">Salad Surprises</option>
 <option value="1221 Connecticut Avenue NW">The Daily
   Dish</option>
 <option value="701 H Street NW">Sushi and Sashimi</option>
 </select>
<?php
}

This function is almost identical to basicMap() except for two things—selectmap.js is being added instead of basicmap.js, and a <select> element has been added beneath the <div>. The <select> element has an id that will be used in the JavaScript. The options of the <select> element are restaurants, with different addresses as values. The JavaScript code will bind a function to the onChange event so that the marker will move as different restaurants are selected.

Packt

LEAVE A REPLY

Please enter your comment!
Please enter your name here