Google Maps APIs & Drupal

On of our latest interesting project was Vancouver’s Business Guide with Reviews. This is directory of businesses in Canada (right now owner filling Vancouver part of it).

The different thing was integration of Google Maps APIs. Client wanted to show new listings and reviews on map on the front page. Also he wanted to show search results on map when searching by category & location.

The core part of site for geo-related things was stock Location module (http://drupal.org/project/location). I've set it to use google's geo-coding service for getting latitude and longitude of listings. So far evertyhing is simple. The problem was inserting all markers on google map while searching for listings or on front page to show latest added reviews and listings.

The simples way was creating some custom php code snippet that will create javascript for showing all these markers. But in my opinion it will be atleast not so nice. And I suspect there will be a lot of problems in future.

After a bit researching I've found geo-feeds specs. Google Maps APIs, just like Google earth, now support KML-format feeds - http://code.google.com/apis/kml/documentation/. Basically this is XML feed describing what to show on top of google map. In tutorial section you can find pretty interesting examples of it. The best way to play with it is to install google earth (http://earth.google.com/), create file with .kml extension and place some structure into it. Then just dblclick on it and it should open in google earth showing what you've created.

So... Now everything became easy. While all listings on sites was just a Views, I've created new page in already existing View and custom themmed it so it shows right kml structure. Made custom page-feed.tpl.php to set right header (Content-Type: application/vnd.google-earth.kml+xml - is what really needed for google maps apis to get your feed. otherwise it will ignore it!).

And now I place common code for google map on page, some code to center page and to add layer with my feed. Here is it! All markers are shown in map =)

Add new comment

Plain text

  • No HTML tags allowed.
  • Web page addresses and e-mail addresses turn into links automatically.
  • Lines and paragraphs break automatically.

To submit this form you need to use Internet Explorer v10+ or recent version of Chrome, Firefox or Safari.