Snippet to render GoogleMap with markers from MODx documents!

Description

Parameters:

&apiKey [text] (required)
The Google Maps api key to use (http://www.google.com/apis/maps/signup.html)

&startID [number] (default: none)
The ID number of the top folder that has google marker documents

&descendentDepth [number] (default: 1)
Number of levels deep to go

&sortBy [text] (default: "createdon")
Field to sort by (recommended values include createdon, pub_date, editedon)

&sortDir ["DESC" | "ASC"] (default: "ASC")
Direction to sort by, either ASC (ascending) or DESC (descending)

&tpl [text] (default: come's from code)
Chunk name to use as a template

&mapDiv [text] (default: "map")
Id name of the div where the map will be rendered

&linksDiv [text] (default: "maplinks")
Id name of the div where the marker links will be rendered

&linksClass [text] (default: "maplink")
Class name to use in the marker links

&mapType ["normal" | "satellite" | "hybrid"] (default: "normal")
Initial type of the map

&centerPos [latitude,longitude] (default: "63.098332,23.056698")
Coordinates to the initial center position of the map

&defaultZoom [number] (default: 8)
Initial zoomlevel for the map

&mapControl ["large" | "small" | "zoomonly" | "none"] (default: "large")
Look of the controls to navigate / zoom the map

&mapTypeControl ["large" | "small" | "none"] (default: "large")
Look of the controls to change the map type

&openMouseOverMarker [0 | 1] (default: "0")
When mouse cursor is moved over the map marker, should the info box open on that marker?

&openMouseClickMarker [0 | 1] (default: "1")
When the map marker is clicked, should the info box open on that marker?

&openMouseOverLink [0 | 1] (default "0")
When mouse cursor is moved over the textual marker link, should the info box open on that marker?

&openMouseClickLink [0 | 1] (default "1")
When the textual marker link is clicked, should the info box open on that marker?

&showOverviewMap [0 | 1] (default: "1")
Show overview map in the right bottom corner of the map?

&overviewMapSize [width,heigth] (default: "150,150")
Size of the overview map

&hideOverviewMapByDefault [0 | 1] (default: "1")
Should the overview map be hidden by default? (arrow indicator visible at the bottom right corner)

&dittoName [text] (default: "Ditto")
Name of the Ditto snippet

&dittoChunk [text] (default: "GoogleMapCode")
Name of the chunk to use in ditto call as template


Planned for future
Add GClientGeocoder and make possible to define markers based on street, city, country and not just by coordinates.

Directions service. A link to markeres where user can write their address or coordinates from where to draw route to the marker.

Custom marker icons and Google Earth marker icons.

Etc...

Instructions

Installation:

If you set base href (to run your site with seo friendly urls), don't close it with short tags. Use this instead:


NOTE: You must have Ditto installed to get markers to the map!

1. Create GoogleMapMarker snippet from the contents of this file.
2. Create chunk called GoogleMapCode and place the following in side that chunk

3. Call the snippet in some document:
[[GoogleMapMarker? &apiKey=`ABQIA..`]]

How to place markers:

1. Create a folder in MODx manager what will keep the marker documents, can be unpublished.
2. Create a new document inside that folder what will be the marker

• Title: Will be used as the marker "sidelink" text (example: My home)
• Description: The coordinates for the marker (example: 63.098332,23.056698)
• Document content: HTML to show in the marker popup.

NOTE: You have to escape all ' characters by putting backslash before them, e.g. '
3. Add the &startID parameter to the snippet call pointing to the folder what has the marker documents example:
[[GoogleMapMarker? &apiKey=`ABQIA..` &startID=`52`]]

How to get map coordinates?

You can use for example this Map desing aid tool. From the "Map controls" dropdown choose "Large". Then navigate to the location where you want the marker. Double click the location on the map and get it's coordinates from the "Center lat,lng" field. (Copy paste to MODx documents description field)

Example GoogleMapMarker template chunk (&tpl)

The template must have 2 divs. A div for the map and div for the side links. That's it. The map will be the size of the div what it has been assigned to. If you do not use the default ids, specify your div ids in the snippet call using &mapDiv and &linksDiv parameters.

Previous Releases

Extras

No results found.