Home

Google Maps

Fri, 10/06/2011 - 14:33 — Matt
Extension Information
Extension File Name: 
GoogleMap.js
Author: 
Richard Wallis
Extension Class Name: 
GoogleMapJuice
Function Parameters: 

GoogleMapJuice(ju,insert,targetDiv,opts)

  • ju - instance of juice
  • insert - JuiceInsert? for page
  • targetDiv - id of element within insert to contain map
  • opts - Controlling options for extension in JSON format
Dependencies: 

Google Maps require an API Key to be passed to the call of their JavaScript Library. Obtain one from Google and set it in Juice before calling any extensions that use Google APIs thus:

juice.googleApiKey="ABQIAAAAKi1c1234naAPtNw6ExDJHBSr1cLuvfmD_hPnfKXXZtPgfYowlRRaiVfGUqzawVB9RWLIPD4MTDzgdw";

Example Code: 

Based upon options passed, displays a Google Map. The center of the map and the zoom level are automatically set to provide best view of all map points passed. Optionally a sub-set of the passed points will be displayed based upon a selection set of points passed.

If no points are passed, map displays centered at the defaultCenter at the defaultZoom level.

If no selection array is passed, all points will be displayed. If a selection array is passed, only points with an id value that is contained in the array will be passed.

Note: In the example below, all locations for a site are passed to the extension, and an array of 'locations' displayed on the page are used to filter points that are required.

When a map point is clicked, an info window is opened contain the title and body html for that point using css classes juiceMapInfoTitle and juiceMapInfoBody respectively.

  var div = '<div id="LocMapPanel" style="display: block; width: 240px; height: 310px"><br/><h2 class="title">Library Location</h2><div id="LocMap" style="width: 240px; height: 250px"></div></div>';
var insert = new JuiceInsert(div,"#itemActions","after");
var libraryLocations = [
   { point : {lt: 51.500087,lg: -0.059738}, id : "Blue Anchor", title : "Blue Anchor Library", body : "Market Place<br/>Southwark Park Road<br/>SE16 3UQ"},
   { point : {lt: 51.490095,lg: -0.098791}, id : "Brandon", title : "Brandon Library", body : "Maddock Way<br/>Cooks Road<br/>SE17 3NH<br/>"},
   { point : {lt: 51.481436,lg: -0.085402}, id : "Camberwell", title : "Camberwell Library", body : "17-21 Camberwell Church Street<br/>SE5 8TR<br/>"}
];

var locs = juice.getMetaArray("location");

var mapOps = {
        height : "250px",
        width : "240px",
        defaultZoom : 12,
        defaultCenter : {lt: 51.481436,lg: -0.085402},
        points : libraryLocations,
        select: locs
};
new GoogleMapJuice(juice,insert,"LocMap",mapOps);