Topic: Support/Comments for GoogleMapMarker  (Read 53860 times)

Pages: 1 ... 4 5 [6] 7 8 ... 11   Go Down

#101: 6-Aug-2007, 10:54 PM

Coding Team

pixelchutes
Posts: 886

WWW
I added a couple new parameters which might be useful to some - one parameter for hiding the list of marker links and the other for making each marker a link rather than opening up the info box.

Awesome, Thx Brian. Smiley
Mike Reid - www.pixelchutes.com
MODx Team Member / Contributor
[Module] MultiMedia Manager / [Module] SiteSearch / [Snippet] DocPassword / [Plugin] EditArea / We support FoxyCart
________________________________
Where every pixel matters.

#102: 11-Sep-2007, 10:40 AM

checco
Posts: 56

Hi,
I'm using this

[!GoogleMapMarker? &apiKey=`ABQIAAAABf02XkJoLwADfxymKdAn1xQxGBmIeOe3ncPMnZuTqHoYOgMMTBSwUQhNrBuWJnRAan6T2_kDx8FpOA` &startID=`17,18,19` &defaultZoom=`8` &centerPos=`45.483244,9.261475`&openMouseOverMarker=`1`!]

I would like to know if there is a way to filter the marker on the map with a TV, or to extract on the map only document with a specific value for example all document with a TV value Nord or Sud ecc.
Thank you.
« Last Edit: 11-Sep-2007, 10:50 AM by checco »

#103: 11-Sep-2007, 11:32 AM

Coding Team

doze
Posts: 4,094

....Boom!

I would like to know if there is a way to filter the marker on the map with a TV, or to extract on the map only document with a specific value for example all document with a TV value Nord or Sud ecc.
Thank you.
Sure.. if you use the code that I have posted to page 6 (at the top) of this thread, seach for this:

Code:
@CODE:var point = new GLatLng([+description+]); var marker = createMarker(point, \'[+title:slashandstrip+]\', \'[+content:slashandstrip+]\'); map.addOverlay(marker);

Replace that with a chunk name, then create the chunk and put the same thing in it and use PHx to do some logic to it. Make it return that content only if certain things matches, eg. some TV value.
New MODx wiki! Please help up with documentation efforts! || Old Wiki

"He can have a lollipop any time he wants to. That's what it means to be a programmer."

#104: 12-Sep-2007, 03:18 AM

checco
Posts: 56

Thank you for the fast answer - I'll try  Smiley

#105: 18-Sep-2007, 03:48 PM


cobnet
Posts: 35

WWW
How would one find out why the Google script is not loading in the header of the page?

I don't think this part of my script is executing:
Code:
//register scripts
$modx->regClientScript($script);
$modx->regClientStartupScript("http://maps.google.com/maps?file=api&v=2&key=".$apiKey);

Why? because this is what I receive when executing the snippet:
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title>Google Maps JavaScript API Example</title>
  </head>
  <body onload="load()" onunload="GUnload()">
    <div id="map" style="float:left; width: 350px; height: 350px;">Loading map...</div>
    <div id="maplinks" style="margin-left: 10px; padding-right: 10px; float: left; display: block; height: 350px; overflow: auto;"></div>
  </body>
</html>

As you can see above the built-in error msgs are not showing so it must be executing the
Code:
if($apiKey != "" && $modx->getChunk($dittoChunk) != "") {
correctly?

I am using modx 9.6.0 and followed your instructions and cannot find anything I have left out.  Any ideas would be greatly appreciated.
Hoping to get this snippet working soon, so I can say good things about it, lol!
Mark

#106: 18-Sep-2007, 04:01 PM

Coding Team

doze
Posts: 4,094

....Boom!

Hmm.. I really don't know why that would happen.. There has been bugs relating those functions, but they should be OK in 0.9.6.
New MODx wiki! Please help up with documentation efforts! || Old Wiki

"He can have a lollipop any time he wants to. That's what it means to be a programmer."

#107: 23-Sep-2007, 09:46 AM

Foundation

OpenGeek
MODx Co-Founder
Posts: 6,938

damn accurate caricatures...

WWW
Might be related to this.  Try making sure the page is not cacheable and you are calling the snippet cacheable, i.e. [[ ]] vs. [! !].
Jason Coward
MODx Co-Founder
xPDO Founder
CTO @ Collabpad
work productively.
work intelligently.
work together.
Light is just a vibration of a note too. Everything is. You've got to keep that in mind.
  Frank Zappa

#108: 6-Oct-2007, 10:51 AM

orx57
Posts: 2

Hi,

I use MODx 0.9.6 and the last snippet found on this thread (version 1.0d). It's work fine, but the map is not display when i'm not login. I would like to display the map to all visitor on the web site.

Any suggestion ?

Regards,

#109: 6-Oct-2007, 11:05 AM

orx57
Posts: 2

5 minutes later ... Smiley
I have check out "cacheable" on the page...

Thanks,

#110: 9-Oct-2007, 09:35 AM


TylerD
Posts: 310

WWW
Do a TV to the template what the marker documents use, then in the marker document define a path to the icon you want for that marker (or 2 tvs if you want to define the shadow image also). Then put this to the snippet in to the line that I said in the other post:

Code:
// Create our "tiny" marker icon
var icon = new GIcon();
icon.image = "[*your_icon_tv*]";
icon.shadow = "[*your_icon_shadow_tv*]";
icon.iconSize = new GSize(20, 35);
icon.shadowSize = new GSize(29, 18);
icon.iconAnchor = new GPoint(10, 15);
icon.infoWindowAnchor = new GPoint(5, 1);

and replace those [*your_icon_tv*] and [*your_icon_shadow_tv*] with your TV name

Hi,

I have a problem with the TV like in this example. I put these lines in my snippet code and I update with "New GMarker(point,icon)". I create TV which image url but my map is empty... the marker are here but not the image...

Any ideas ?

Thx
TylerD - In MODx we trust
[Dernières créations MODx :
Whynet.Org, Copier@Coller.net, Les Sens Bois]

#111: 10-Oct-2007, 03:55 AM

Coding Team

doze
Posts: 4,094

....Boom!

Not without seeing what the snippet outputs to the html source
New MODx wiki! Please help up with documentation efforts! || Old Wiki

"He can have a lollipop any time he wants to. That's what it means to be a programmer."

#112: 10-Oct-2007, 04:04 AM


TylerD
Posts: 310

WWW
Snippet code :

Code:
<?php
/* Snippet name: [[GoogleMapMarker]]
 * Version: 1.0c for ditto v2+
 * Author: doze <dozebox@gmail.com>
 * 
 * Snippet to generate goolemaps map and place markers 
 * to the maps from documents.
 * 
 * Installation:
 * -------------
 * 1. Create a snippet "phx:slashandstrip" with this content:
 *    return addcslashes(preg_replace("~([\n\r\t\s]+)~"," ",$output), "'");
 *
 * 2. 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`]]
 *
 * 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.
 *
 *  <div id="map" style="float:left; width: 350px; height: 350px;">Loading map...</div>
 *  <div id="maplinks" style="margin-left: 10px; padding-right: 10px; float: left; display: block; height: 350px; overflow: auto;"></div>
 *
 */

////////////////////////////////////////////////////////
// Parameter default values configuration
////////////////////////////////////////////////////////

// [text]
// The Google Maps api key to use (http://www.google.com/apis/maps/signup.html)
$apiKey = (isset($apiKey)) ? $apiKey "";

// [number]
// The ID number of the top folder that has google marker documents
$startID = (isset($startID)) ? $startID "";

// [number]
// Number of levels deep to go
$descendentDepth = (isset($descendentDepth)) ? $descendentDepth 1;

// [text]
// Field to sort by (recommended values include createdon, pub_date, editedon)
$sortBy = (isset($sortBy)) ? $sortBy "createdon";

// ["DESC" | "ASC"]
// Direction to sort by, either ASC (ascending) or DESC (descending)
$sortDir = (isset($sortDir)) ? $sortDir "ASC";

// [text]
// Chunk name to use as a template
$tpl = (isset($tpl)) ? $tpl "";

// [text]
// Id name of the div where the map will be rendered
$mapDiv = (isset($mapDiv)) ? $mapDiv "map";

// [text]
// Id name of the div where the marker links will be rendered
$linksDiv = (isset($linksDiv)) ? $linksDiv "maplinks";

// [text]
// Class name to use in the marker links
$linksClass = (isset($linksClass)) ? $linksClass "maplink";

// ["normal" | "satellite" | "hybrid"]
// Initial type of the map
$mapType = (isset($mapType)) ? $mapType "normal";

// [latitude,longitude]
// Coordinates to the initial center position of the map
$centerPos = (isset($centerPos)) ? $centerPos "63.098332,23.056698";

// [number]
// Initial zoomlevel for the map
$defaultZoom = (isset($defaultZoom)) ? $defaultZoom "8";

// ["large" | "small" | "zoomonly" | "none"]
// Look of the controls to navigate / zoom the map
$mapControl = (isset($mapControl)) ? $mapControl "large";

// ["large" | "small" | "none"]
// Look of the controls to change the map type
$mapTypeControl = (isset($mapTypeControl)) ? $mapTypeControl "large";

// [0 | 1]
// When mouse cursor is moved over the map marker, should the info box open on that marker?
$openMouseOverMarker = (isset($openMouseOverMarker)) ? $openMouseOverMarker 0;

// [0 | 1]
// When the map marker is clicked, should the info box open on that marker?
$openMouseClickMarker = (isset($openMouseClickMarker)) ? $openMouseClickMarker 1;

// [0 | 1]
// When mouse cursor is moved over the textual marker link, should the info box open on that marker?
$openMouseOverLink = (isset($openMouseOverLink)) ? $openMouseOverLink 0;

// [0 | 1]
// When the textual marker link is clicked, should the info box open on that marker?
$openMouseClickLink = (isset($openMouseClickLink)) ? $openMouseClickLink 1;

// [0 | 1]
// Show overview map in the right bottom corner of the map?
$showOverviewMap = (isset($showOverviewMap)) ? $showOverviewMap 1;

// [width,heigth]
// Size of the overview map
$overviewMapSize = (isset($overviewMapSize)) ? $overviewMapSize "150,150";

// [0 | 1]
// Should the overview map be hidden by default? (arrow indicator visible at the bottom right corner)
$hideOverviewMapByDefault = (isset($hideOverviewMapByDefault)) ? $hideOverviewMapByDefault 1;

// [text]
// Name of the Ditto snippet
$dittoName = (isset($dittoName)) ? $dittoName "Ditto";

////////////////////////////////////////////////////////
// Start of snippet code
////////////////////////////////////////////////////////

if($apiKey != "") {

    
$script '
        <script type="text/javascript">
        //<![CDATA[
            
            // addEvent scripts written by Dean Edwards, 2005
            // with input from Tino Zijdel, Matthias Miller, Diego Perini
            // http://dean.edwards.name/weblog/2005/10/add-event/

            function addEvent(element, type, handler) {
                if (element.addEventListener) {
                    element.addEventListener(type, handler, false);
                } else {
                    // assign each event handler a unique ID
                    if (!handler.$$guid) handler.$$guid = addEvent.guid++;
                    // create a hash table of event types for the element
                    if (!element.events) element.events = {};
                    // create a hash table of event handlers for each element/event pair
                    var handlers = element.events[type];
                    if (!handlers) {
                        handlers = element.events[type] = {};
                        // store the existing event handler (if there is one)
                        if (element["on" + type]) {
                            handlers[0] = element["on" + type];
                        }
                    }
                    // store the event handler in the hash table
                    handlers[handler.$$guid] = handler;
                    // assign a global event handler to do all the work
                    element["on" + type] = handleEvent;
                }
            };
            // a counter used to create unique IDs
            addEvent.guid = 1;

            function removeEvent(element, type, handler) {
                if (element.removeEventListener) {
                    element.removeEventListener(type, handler, false);
                } else {
                    // delete the event handler from the hash table
                    if (element.events && element.events[type]) {
                        delete element.events[type][handler.$$guid];
                    }
                }
            };

            function handleEvent(event) {
                var returnValue = true;
                // grab the event object (IE uses a global event object)
                event = event || fixEvent(((this.ownerDocument || this.document || this).parentWindow || window).event);
                // get a reference to the hash table of event handlers
                var handlers = this.events[event.type];
                // execute each event handler
                for (var i in handlers) {
                    this.$$handleEvent = handlers[i];
                    if (this.$$handleEvent(event) === false) {
                        returnValue = false;
                    }
                }
                return returnValue;
            };

            function fixEvent(event) {
                // add W3C standard event methods
                event.preventDefault = fixEvent.preventDefault;
                event.stopPropagation = fixEvent.stopPropagation;
                return event;
            };
            fixEvent.preventDefault = function() {
                this.returnValue = false;
            };
            fixEvent.stopPropagation = function() {
                this.cancelBubble = true;
            };
                
            addEvent(window, "unload", GUnload);

            if (GBrowserIsCompatible()) {
                // Display the map, with some controls
                var map = new GMap2(document.getElementById("'
.$mapDiv.'"));
                // set initial center position
                map.setCenter(new GLatLng('
.$centerPos.'),'.$defaultZoom.');
    
                //add controls to navigate / zoom
                '
;

    if (
$mapControl == "zoomonly") {
        
$script .= '
                map.addControl(new GSmallZoomControl());'
;
    } else if (
$mapControl == "large") {
        
$script .= '
                map.addControl(new GLargeMapControl());'
;
    } else if (
$mapControl == "small") {
        
$script .= '
                map.addControl(new GSmallMapControl());'
;
    }

    if (
$mapTypeControl == "large") {
        
$script .= '
                // add controls to change map type
                map.addControl(new GMapTypeControl(0));'
;
    } else if (
$mapTypeControl == "small") {
        
$script .= '
                // add controls to change map type
                map.addControl(new GMapTypeControl(1));'
;
    }

        
$script .= '
                //set initial map type
                '
;
    if (
$mapType == "normal") {
        
$script .= '
                map.setMapType(G_NORMAL_MAP);'
;
    } else if (
$mapType == "satellite") {
        
$script .= '
                map.setMapType(G_SATELLITE_MAP);'
;
    } else if (
$mapType == "hybrid") {
        
$script .= '
                map.setMapType(G_HYBRID_MAP);'
;
    }
        
$script .= '
                // arrays to hold copies of the markers and html used by the sidebar
                // because the function closure trick doesnt work there
                var sidebar_html = "";
                var gmarkers = [];
                var htmls = [];
                var i = 0;
// Create our "tiny" marker icon
var icon = new GIcon();
icon.image = "[*MarqueurSaison*]";
icon.shadow = "";
icon.iconSize = new GSize(20, 35);
icon.shadowSize = new GSize(29, 18);
icon.iconAnchor = new GPoint(10, 15);
icon.infoWindowAnchor = new GPoint(5, 1);
                // a function to create the marker and set up the event window
                function createMarker(point,name,html) {
                    var marker = new GMarker(point,icon);'
;

    if(
$openMouseClickMarker) {
        
$script .= '
                    // event listener to open info on click
                    GEvent.addListener(marker, "click", function(){
                        marker.openInfoWindowHtml(html);
                    });'
;
    }

    if(
$openMouseOverMarker) {
        
$script .= '
                    // The new marker "mouseover" listener
                    GEvent.addListener(marker,"mouseover", function(){
                        marker.openInfoWindowHtml(html);
                    });'
;
    }

        
$script .= '    
                    // save the info we need to use later for the sidebar
                    gmarkers[i] = marker;
                    htmls[i] = html;
                    // add a line to the sidebar html
                    sidebar_html += \'<div class="'
.$linksClass.'"><a href="javascript:void(0)" ';

    if(
$openMouseClickLink) {
        
$script .= 'onClick="myclick(\' + i + \')"';
    }

    if(
$openMouseOverLink) {
        
$script .= 'onMouseOver="myclick(\' + i + \')"';
    }

        
$script .= '>\' + name + \'</a></div>\';
                    i++;

                    return marker;
                }

                // This function picks up the click and opens the corresponding info window
                function myclick(i) {
                    gmarkers[i].openInfoWindowHtml(htmls[i]);
                }'
;
    if(
$startID != "") {

        
$script .= $modx->runSnippet($dittoName,array('depth' => $descendentDepth'sortBy' => $sortBy'sortDir' => $sortDir'summarize' => 'all''displayArchive' => '0''tpl' => '@CODE:var point = new GLatLng([+description+]); var marker = createMarker(point, \'[+title:slashandstrip+]\', \'[+content:slashandstrip+]\'); map.addOverlay(marker);''parents' => $startID'showPublishedOnly' => '0'));

        
$script .= '
                // put the assembled sidebar_html contents into the sidebar div
                document.getElementById("'
.$linksDiv.'").innerHTML = sidebar_html;';
    }

    if(
$showOverviewMap) {
        
$script .= '
                // ======== Add a map overview ==========
                var ovcontrol = new GOverviewMapControl(new GSize('
.$overviewMapSize.')); 
                map.addControl(ovcontrol,new GControlPosition(G_ANCHOR_BOTTOM_RIGHT, new GSize(10, 10)));'
;
    }
    if(
$hideOverviewMapByDefault) {
        
$script .= '
                //set hidden by default (without animation)
                ovcontrol.hide(1);'
;
    }
        
$script .= '
            } else { // !GBrowserIsCompatible()
                alert("Sorry, the Google Maps API is not compatible with this browser");
            }
    
            // This Javascript is based on code provided by the
            // Blackpool Community Church Javascript Team
            // http://www.commchurch.freeserve.co.uk/ 
            // http://www.econym.demon.co.uk/googlemaps/

        //]]>
        </script>
        '
;

    
//register scripts
    
$modx->regClientScript($script);
    
$modx->regClientStartupScript("http://maps.google.com/maps?file=api&amp;v=2&amp;key=".$apiKey);

    if(
$tpl == "") {
        
$returnstring '
            <div id="'
.$mapDiv.'" style="float:left; width: 350px; height: 350px;">Loading map...</div>
            <div id="'
.$linksDiv.'" style="margin-left: 10px; padding-right: 10px; float: left; display: block; height: 350px; overflow: auto;"></div>
            <noscript>
                <b>JavaScript must be enabled in order for you to use Google Maps.</b> 
                However, it seems JavaScript is either disabled or not supported by your browser.
                To view Google Maps, enable JavaScript by changing your browser options, and then
                try again.
            </noscript>
            '
;
    } else {
        
$returnstring $modx->getChunk($tpl);
    }
} else {
    if (
$apiKey == "") {
        
$returnstring '
                        You have to provide a Google Maps API key to use!<br />
                        If you don\'t have one yet, go <a href="http://www.google.com/apis/maps/signup.html" alt="Sign up for the Google Maps API">here</a> to get it. NOTE: the api key is site/directory specific!<br /><br />
                        '
;
    }

}

return 
$returnstring;
?>

HTML Code output :

Code:
// Create our "tiny" marker icon
var icon = new GIcon();
icon.image = "[*MarqueurSaison*]";
icon.shadow = "";
icon.iconSize = new GSize(20, 35);
icon.shadowSize = new GSize(29, 18);
icon.iconAnchor = new GPoint(10, 15);
icon.infoWindowAnchor = new GPoint(5, 1);
                // a function to create the marker and set up the event window
                function createMarker(point,name,html) {
                    var marker = new GMarker(point,icon);

Thx
TylerD - In MODx we trust
[Dernières créations MODx :
Whynet.Org, Copier@Coller.net, Les Sens Bois]

#113: 31-Oct-2007, 07:54 PM


sal
Posts: 113

WWW
I've gotten myself into a little mess and am probably looking at the long stupid solution to a problem here. Anyway, what I want to do is rather than use only the [+description+] field as pointer content, I'd like to return the actual document which I've made a template for to output a nicely structured block using several fields and TV's for the document. So I was thinking since its a Ditto call, I could just return from a separate snippet ([[BuildPage]] the page built (I'm a bit stuck here) using the [+id+] placeholder as parameter.

#114: 29-Nov-2007, 02:18 AM

Julien
Posts: 1

I installed GoogleMapMarker on modx 0.9.5 and it worked perfectly. I upgraded to 0.9.6 and then to 0.9.6.1 and it does not work anymore.
I have put the new snippet code with phx script, I have removed the cacheable option but nothing appears on my webpage see :
http://rma.pu-pm.univ-fcomte.fr/lifc/index.php?id=43

Any idea?

Snippet code :

Code:
<?php
/* Snippet name: [[GoogleMapMarker]]
 * Version: 1.0c for ditto v2+
 * Author: doze <dozebox@gmail.com>
 * 
 * Snippet to generate goolemaps map and place markers 
 * to the maps from documents.
 * 
 * Installation:
 * -------------
 * 1. Create a snippet "phx:slashandstrip" with this content:
 *    return addcslashes(preg_replace("~([\n\r\t\s]+)~"," ",$output), "'");
 *
 * 2. 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`]]
 *
 * 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.
 *
 *  <div id="map" style="float:left; width: 350px; height: 350px;">Loading map...</div>
 *  <div id="maplinks" style="margin-left: 10px; padding-right: 10px; float: left; display: block; height: 350px; overflow: auto;"></div>
 *
 */

////////////////////////////////////////////////////////
// Parameter default values configuration
////////////////////////////////////////////////////////

// [text]
// The Google Maps api key to use (http://www.google.com/apis/maps/signup.html)
//$apiKey = (isset($apiKey)) ? $apiKey : "";
$apiKey = (isset($apiKey)) ? $apiKey "ABQIAAAAbSXGZna66KeS1X4PNgV41hR0mMXKosHLqEVLVFtb4q_qkHDpYhRMyYj5zVS5tnaay9hOwBMkps7dnQ";

// [number]
// The ID number of the top folder that has google marker documents
//$startID = (isset($startID)) ? $startID : "";
$startID = (isset($startID)) ? $startID "50";

// [number]
// Number of levels deep to go
$descendentDepth = (isset($descendentDepth)) ? $descendentDepth 1;

// [text]
// Field to sort by (recommended values include createdon, pub_date, editedon)
$sortBy = (isset($sortBy)) ? $sortBy "createdon";

// ["DESC" | "ASC"]
// Direction to sort by, either ASC (ascending) or DESC (descending)
$sortDir = (isset($sortDir)) ? $sortDir "ASC";

// [text]
// Chunk name to use as a template
//$tpl = (isset($tpl)) ? $tpl : "";
$tpl = (isset($tpl)) ? $tpl "tplGoogleMap";


// [text]
// Id name of the div where the map will be rendered
$mapDiv = (isset($mapDiv)) ? $mapDiv "map";

// [text]
// Id name of the div where the marker links will be rendered
$linksDiv = (isset($linksDiv)) ? $linksDiv "maplinks";

// [text]
// Class name to use in the marker links
$linksClass = (isset($linksClass)) ? $linksClass "maplink";

// ["normal" | "satellite" | "hybrid"]
// Initial type of the map
$mapType = (isset($mapType)) ? $mapType "normal";

// [latitude,longitude]
// Coordinates to the initial center position of the map
$centerPos = (isset($centerPos)) ? $centerPos "47.495937,6.805344";

// [number]
// Initial zoomlevel for the map
$defaultZoom = (isset($defaultZoom)) ? $defaultZoom "16";

// ["large" | "small" | "zoomonly" | "none"]
// Look of the controls to navigate / zoom the map
$mapControl = (isset($mapControl)) ? $mapControl "large";

// ["large" | "small" | "none"]
// Look of the controls to change the map type
$mapTypeControl = (isset($mapTypeControl)) ? $mapTypeControl "large";

// [0 | 1]
// When mouse cursor is moved over the map marker, should the info box open on that marker?
$openMouseOverMarker = (isset($openMouseOverMarker)) ? $openMouseOverMarker 0;

// [0 | 1]
// When the map marker is clicked, should the info box open on that marker?
$openMouseClickMarker = (isset($openMouseClickMarker)) ? $openMouseClickMarker 1;

// [0 | 1]
// When mouse cursor is moved over the textual marker link, should the info box open on that marker?
$openMouseOverLink = (isset($openMouseOverLink)) ? $openMouseOverLink 0;

// [0 | 1]
// When the textual marker link is clicked, should the info box open on that marker?
$openMouseClickLink = (isset($openMouseClickLink)) ? $openMouseClickLink 1;

// [0 | 1]
// Show overview map in the right bottom corner of the map?
$showOverviewMap = (isset($showOverviewMap)) ? $showOverviewMap 1;

// [width,heigth]
// Size of the overview map
$overviewMapSize = (isset($overviewMapSize)) ? $overviewMapSize "600,480";

// [0 | 1]
// Should the overview map be hidden by default? (arrow indicator visible at the bottom right corner)
$hideOverviewMapByDefault = (isset($hideOverviewMapByDefault)) ? $hideOverviewMapByDefault 1;

// [text]
// Name of the Ditto snippet
$dittoName = (isset($dittoName)) ? $dittoName "Ditto";

// [text]
// Name of the chunk to use in ditto call as template
$dittoChunk = (isset($dittoChunk)) ? $dittoChunk "GoogleMapCode";

////////////////////////////////////////////////////////
// Start of snippet code
////////////////////////////////////////////////////////

if($apiKey != "") {

    
$script '
        <script type="text/javascript">
        //<![CDATA[
            
            // addEvent scripts written by Dean Edwards, 2005
            // with input from Tino Zijdel, Matthias Miller, Diego Perini
            // http://dean.edwards.name/weblog/2005/10/add-event/

            function addEvent(element, type, handler) {
                if (element.addEventListener) {
                    element.addEventListener(type, handler, false);
                } else {
                    // assign each event handler a unique ID
                    if (!handler.$$guid) handler.$$guid = addEvent.guid++;
                    // create a hash table of event types for the element
                    if (!element.events) element.events = {};
                    // create a hash table of event handlers for each element/event pair
                    var handlers = element.events[type];
                    if (!handlers) {
                        handlers = element.events[type] = {};
                        // store the existing event handler (if there is one)
                        if (element["on" + type]) {
                            handlers[0] = element["on" + type];
                        }
                    }
                    // store the event handler in the hash table
                    handlers[handler.$$guid] = handler;
                    // assign a global event handler to do all the work
                    element["on" + type] = handleEvent;
                }
            };
            // a counter used to create unique IDs
            addEvent.guid = 1;

            function removeEvent(element, type, handler) {
                if (element.removeEventListener) {
                    element.removeEventListener(type, handler, false);
                } else {
                    // delete the event handler from the hash table
                    if (element.events && element.events[type]) {
                        delete element.events[type][handler.$$guid];
                    }
                }
            };

            function handleEvent(event) {
                var returnValue = true;
                // grab the event object (IE uses a global event object)
                event = event || fixEvent(((this.ownerDocument || this.document || this).parentWindow || window).event);
                // get a reference to the hash table of event handlers
                var handlers = this.events[event.type];
                // execute each event handler
                for (var i in handlers) {
                    this.$$handleEvent = handlers[i];
                    if (this.$$handleEvent(event) === false) {
                        returnValue = false;
                    }
                }
                return returnValue;
            };

            function fixEvent(event) {
                // add W3C standard event methods
                event.preventDefault = fixEvent.preventDefault;
                event.stopPropagation = fixEvent.stopPropagation;
                return event;
            };
            fixEvent.preventDefault = function() {
                this.returnValue = false;
            };
            fixEvent.stopPropagation = function() {
                this.cancelBubble = true;
            };
                
            addEvent(window, "unload", GUnload);

            if (GBrowserIsCompatible()) {
                // Display the map, with some controls
                var map = new GMap2(document.getElementById("'
.$mapDiv.'"));
                // set initial center position
                map.setCenter(new GLatLng('
.$centerPos.'),'.$defaultZoom.');
    
                //add controls to navigate / zoom
                '
;

    if (
$mapControl == "zoomonly") {
        
$script .= '
                map.addControl(new GSmallZoomControl());'
;
    } else if (
$mapControl == "large") {
        
$script .= '
                map.addControl(new GLargeMapControl());'
;
    } else if (
$mapControl == "small") {
        
$script .= '
                map.addControl(new GSmallMapControl());'
;
    }

    if (
$mapTypeControl == "large") {
        
$script .= '
                // add controls to change map type
                map.addControl(new GMapTypeControl(0));'
;
    } else if (
$mapTypeControl == "small") {
        
$script .= '
                // add controls to change map type
                map.addControl(new GMapTypeControl(1));'
;
    }

        
$script .= '
                //set initial map type
                '
;
    if (
$mapType == "normal") {
        
$script .= '
                map.setMapType(G_NORMAL_MAP);'
;
    } else if (
$mapType == "satellite") {
        
$script .= '
                map.setMapType(G_SATELLITE_MAP);'
;
    } else if (
$mapType == "hybrid") {
        
$script .= '
                map.setMapType(G_HYBRID_MAP);'
;
    }
        
$script .= '
                // arrays to hold copies of the markers and html used by the sidebar
                // because the function closure trick doesnt work there
                var sidebar_html = "";
                var gmarkers = [];
                var htmls = [];
                var i = 0;

                // a function to create the marker and set up the event window
                function createMarker(point,name,html) {
                    var marker = new GMarker(point);'
;

    if(
$openMouseClickMarker) {
        
$script .= '
                    // event listener to open info on click
                    GEvent.addListener(marker, "click", function(){
                        marker.openInfoWindowHtml(html);
                    });'
;
    }

    if(
$openMouseOverMarker) {
        
$script .= '
                    // The new marker "mouseover" listener
                    GEvent.addListener(marker,"mouseover", function(){
                        marker.openInfoWindowHtml(html);
                    });'
;
    }

        
$script .= '    
                    // save the info we need to use later for the sidebar
                    gmarkers[i] = marker;
                    htmls[i] = html;
                    // add a line to the sidebar html
                    sidebar_html += \'<div class="'
.$linksClass.'"><a href="javascript:void(0)" ';

    if(
$openMouseClickLink) {
        
$script .= 'onClick="myclick(\' + i + \')"';
    }

    if(
$openMouseOverLink) {
        
$script .= 'onMouseOver="myclick(\' + i + \')"';
    }

        
$script .= '>\' + name + \'</a></div>\';
                    i++;

                    return marker;
                }

                // This function picks up the click and opens the corresponding info window
                function myclick(i) {
                    gmarkers[i].openInfoWindowHtml(htmls[i]);
                }'
;
    if(
$startID != "") {

        
$script .= $modx->runSnippet($dittoName,array('depth' => $descendentDepth'sortBy' => $sortBy'sortDir' => $sortDir'summarize' => 'all''displayArchive' => '0''tpl' => '@CODE:var point = new GLatLng([+description+]); var marker = createMarker(point, \'[+title:slashandstrip+]\', \'[+content:slashandstrip+]\'); map.addOverlay(marker);''parents' => $startID'showPublishedOnly' => '0'));

        
$script .= '
                // put the assembled sidebar_html contents into the sidebar div
                document.getElementById("'
.$linksDiv.'").innerHTML = sidebar_html;';
    }

    if(
$showOverviewMap) {
        
$script .= '
                // ======== Add a map overview ==========
                var ovcontrol = new GOverviewMapControl(new GSize('
.$overviewMapSize.')); 
                map.addControl(ovcontrol,new GControlPosition(G_ANCHOR_BOTTOM_RIGHT, new GSize(10, 10)));'
;
    }
    if(
$hideOverviewMapByDefault) {
        
$script .= '
                //set hidden by default (without animation)
                ovcontrol.hide(1);'
;
    }
        
$script .= '
            } else { // !GBrowserIsCompatible()
                alert("Sorry, the Google Maps API is not compatible with this browser");
            }
    
            // This Javascript is based on code provided by the
            // Blackpool Community Church Javascript Team
            // http://www.commchurch.freeserve.co.uk/ 
            // http://www.econym.demon.co.uk/googlemaps/

        //]]>
        </script>
        '
;

    
//register scripts
    
$modx->regClientScript($script);
    
$modx->regClientStartupScript("http://maps.google.com/maps?file=api&amp;v=2&amp;key=".$apiKey);

    if(
$tpl == "") {
        
$returnstring '
            <div id="'
.$mapDiv.'" style="float:left; width: 350px; height: 350px;">Loading map...</div>
            <div id="'
.$linksDiv.'" style="margin-left: 10px; padding-right: 10px; float: left; display: block; height: 350px; overflow: auto;"></div>
            <noscript>
                <b>JavaScript must be enabled in order for you to use Google Maps.</b> 
                However, it seems JavaScript is either disabled or not supported by your browser.
                To view Google Maps, enable JavaScript by changing your browser options, and then
                try again.
            </noscript>
            '
;
    } else {
        
$returnstring $modx->getChunk($tpl);
    }
} else {
    if (
$apiKey == "") {
        
$returnstring '
                        You have to provide a Google Maps API key to use!<br />
                        If you don\'t have one yet, go <a href="http://www.google.com/apis/maps/signup.html" alt="Sign up for the Google Maps API">here</a> to get it. NOTE: the api key is site/directory specific!<br /><br />
                        '
;
    }

}

return 
$returnstring;
?>

?>

Generated html code :
Code:
  <script type="text/javascript">
        //<![CDATA[
           
            // addEvent scripts written by Dean Edwards, 2005
            // with input from Tino Zijdel, Matthias Miller, Diego Perini
            // http://dean.edwards.name/weblog/2005/10/add-event/

            function addEvent(element, type, handler) {
                if (element.addEventListener) {
                    element.addEventListener(type, handler, false);
                } else {
                    // assign each event handler a unique ID
                    if (!handler.$$guid) handler.$$guid = addEvent.guid++;
                    // create a hash table of event types for the element
                    if (!element.events) element.events = {};
                    // create a hash table of event handlers for each element/event pair
                    var handlers = element.events[type];
                    if (!handlers) {
                        handlers = element.events[type] = {};
                        // store the existing event handler (if there is one)
                        if (element["on" + type]) {
                            handlers[0] = element["on" + type];
                        }
                    }
                    // store the event handler in the hash table
                    handlers[handler.$$guid] = handler;
                    // assign a global event handler to do all the work
                    element["on" + type] = handleEvent;
                }
            };
            // a counter used to create unique IDs
            addEvent.guid = 1;

            function removeEvent(element, type, handler) {
                if (element.removeEventListener) {
                    element.removeEventListener(type, handler, false);
                } else {
                    // delete the event handler from the hash table
                    if (element.events && element.events[type]) {
                        delete element.events[type][handler.$$guid];
                    }
                }
            };

            function handleEvent(event) {
                var returnValue = true;
                // grab the event object (IE uses a global event object)
                event = event || fixEvent(((this.ownerDocument || this.document || this).parentWindow || window).event);
                // get a reference to the hash table of event handlers
                var handlers = this.events[event.type];
                // execute each event handler
                for (var i in handlers) {
                    this.$$handleEvent = handlers[i];
                    if (this.$$handleEvent(event) === false) {
                        returnValue = false;
                    }
                }
                return returnValue;
            };

            function fixEvent(event) {
                // add W3C standard event methods
                event.preventDefault = fixEvent.preventDefault;
                event.stopPropagation = fixEvent.stopPropagation;
                return event;
            };
            fixEvent.preventDefault = function() {
                this.returnValue = false;
            };
            fixEvent.stopPropagation = function() {
                this.cancelBubble = true;
            };
               
            addEvent(window, "unload", GUnload);

            if (GBrowserIsCompatible()) {
                // Display the map, with some controls
                var map = new GMap2(document.getElementById("map"));
                // set initial center position
                map.setCenter(new GLatLng(47.495937,6.805344),16);
   
                //add controls to navigate / zoom
               
                map.addControl(new GLargeMapControl());
                // add controls to change map type
                map.addControl(new GMapTypeControl(0));
                //set initial map type
               
                map.setMapType(G_NORMAL_MAP);
                // arrays to hold copies of the markers and html used by the sidebar
                // because the function closure trick doesnt work there
                var sidebar_html = "";
                var gmarkers = [];
                var htmls = [];
                var i = 0;

                // a function to create the marker and set up the event window
                function createMarker(point,name,html) {
                    var marker = new GMarker(point);
                    // event listener to open info on click
                    GEvent.addListener(marker, "click", function(){
                        marker.openInfoWindowHtml(html);
                    });   
                    // save the info we need to use later for the sidebar
                    gmarkers[i] = marker;
                    htmls[i] = html;
                    // add a line to the sidebar html
                    sidebar_html += '<div class="maplink"><a href="javascript:void(0)" onClick="myclick(' + i + ')">' + name + '</a></div>';
                    i++;

                    return marker;
                }

                // This function picks up the click and opens the corresponding info window
                function myclick(i) {
                    gmarkers[i].openInfoWindowHtml(htmls[i]);
                }<?
// Use the following syntax $param = 'value';
?>var point = new GLatLng(47.495458,6.805784); var marker = createMarker(point, 'RMA lab', '<font size="1">LIFC/rma<br />Centre de D&eacute;veloppement Multim&eacute;dia<br />1, cour Leprince-Ringuet<br />BP 21126 / Montbeliard Cedex<br /></font><img width="200" height="150" align="bottom" src="http://nao.pu-pm.univ-fcomte.fr/lifc/assets/images/numerica3Thumb.png" alt="" />'); map.addOverlay(marker);var point = new GLatLng(47.510621,6.796149); var marker = createMarker(point, 'CROUS', 'R&eacute;sidence Ren&eacute; Thom<br />Rue Cl&eacute;menceau<br />25200 Montb&eacute;liard<br /><img width="217" height="150" src="http://nao.pu-pm.univ-fcomte.fr/lifc/assets/images/crous.jpg" alt="" />'); map.addOverlay(marker);var point = new GLatLng(47.510425,6.80132); var marker = createMarker(point, 'SNCF Railway Stat.', 'SNCF Railway Station'); map.addOverlay(marker);var point = new GLatLng(47.494908,6.802887); var marker = createMarker(point, 'R&T building', '<font size="1">R&eacute;seaux &amp; T&eacute;l&eacute;coms<br />4, place Tharradin<br />25200 Montb&eacute;liard<br /></font><img width="160" height="120" align="bottom" src="http://nao.pu-pm.univ-fcomte.fr/lifc/assets/images/rt.jpg" alt="" />'); map.addOverlay(marker);var point = new GLatLng(47.495458,6.805365); var marker = createMarker(point, 'SRC building', '<font size="1">Services et R&eacute;seaux de Communication<br />4, place Tharradin<br />25200 Montb&eacute;liard<br /></font>'); map.addOverlay(marker);
                // put the assembled sidebar_html contents into the sidebar div
                document.getElementById("maplinks").innerHTML = sidebar_html;
                // ======== Add a map overview ==========
                var ovcontrol = new GOverviewMapControl(new GSize(600,480));
                map.addControl(ovcontrol,new GControlPosition(G_ANCHOR_BOTTOM_RIGHT, new GSize(10, 10)));
                //set hidden by default (without animation)
                ovcontrol.hide(1);
            } else { // !GBrowserIsCompatible()
                alert("Sorry, the Google Maps API is not compatible with this browser");
            }
   
            // This Javascript is based on code provided by the
            // Blackpool Community Church Javascript Team
            // http://www.commchurch.freeserve.co.uk/
            // http://www.econym.demon.co.uk/googlemaps/

        //]]>
        </script>

#115: 12-Dec-2007, 04:02 AM


Pixel Stuff
Posts: 275

WWW
As a suggested feature, I'd like to see a search field in the marker-popup to get directions from the marker location to a users address (or vise-versa).  And second, an easy way to let a user select two pre-listed markers and have the map provide the written directions between the two points.

Now that would be cool.
« Last Edit: 18-Dec-2007, 05:04 PM by jbjones »

#116: 3-Jan-2008, 03:57 AM

charloteuf
Posts: 2

Hi everybody,

first of all..thank you so much for this work !! very nice work !!
I would like to use complete address instead of using point... (if you see what i mean...) but i don't know excatly how to proceed...
Could you help me ?

Thank you in advance for advices...

JC

#117: 1-Feb-2008, 04:31 AM

imandic
Posts: 51

WWW
I had a problem with showing markers...
Map was there, but without markers...

All the markers shown on page after I changed marker documents to UNPUBLISHED...http://www.spotkg.com/index.php?q=95.html

#118: 24-Feb-2008, 09:40 PM

puffin
Posts: 31

The following problem has been resolved: My default config file in the ditto/configs folder apparently was using short php code (<?). I changed the first line to <?php  and that ended my error. Whew, took many hours to figure that one out...Why did the ditto developers use short code in the first place?? Sloppy coding! I hope this helps someone else.
-----------
My map works fine until I attempt to use markers, then it fails to load.

I'm using modx 9.6.1, ditto 2.0.2, doze's new snippet (pg 6 of this topic), and phX has been uploaded with the chunk phx:slashandstrip

--my page containing the GoggleMapMarker snippet is uncached
--my marker info resides in an unpublished doc within an unpublished parent doc
--my snippet calls the parent doc using the correct parameter (eg: &startID=`29`)
--RTE is turned off and no errant code is present in my marker docs or my snippet call

Examining the page source, it's adding some errant PHP code right before it loads my markers which stops the map from loading:
<?
// Use the following syntax $param = 'value';
?>

This code appears to be coming from the file: configs/default.config.php

Here's the html output with the errant code in that part of my page:
Code:
// This function picks up the click and opens the corresponding info window
                function myclick(i) {
                    gmarkers[i].openInfoWindowHtml(htmls[i]);
                }<?
// Use the following syntax $param = 'value';
?>]var point = new GLatLng(45.472050,-89.729939); var marker = createMarker(point, 'Summit', 'Treehaven Environmental Learning Center'); map.addOverlay(marker);var point = new GLatLng(39.759055,-84.194439); var marker = createMarker(point, 'Summit 2', 'Aullwood Audubon Center and Farm'); map.addOverlay(marker);
                // put the assembled sidebar_html contents into the sidebar div
                document.getElementById("maplinks").innerHTML = sidebar_html;}

I know this errant code is the problem because if I copy the entire page source into an editor and remove the code, the map loads perfectly with my markers.

Does anyone have any idea why this errant code is appearing and how to remove it?
« Last Edit: 25-Feb-2008, 07:47 AM by puffin »

#119: 24-Feb-2008, 11:24 PM


chinesedream
Posts: 332

Lotus Seeds Design

WWW
 Hi, I didn't follow this thread closely and only took a look on the GoogleMap Maker snippet, so please ignore me if I am saying something totally different.

I just did a static site for a client who insisted on using Google Map, first I thought it would be quite difficult as I really didn't want to learn the Google API and thought it would also violate Google's copyrights; I also investigated GoogleMap Maker from Modx, thought everything was way too over my head. Just as I was about to give up, I learned that I can actually use google map iframe to show client's business location from client's site. I got the code from Google Map, all I did was entering client's business location, and had the iframe code generated from there.

Just thought if you are trying to do something similar, perhaps getting the iframe code for Google Map is the best way to go.

#120: 25-Feb-2008, 06:36 PM

puffin
Posts: 31

Chinesedream: Your solution may work for a map with a single location, but GoogleMapMarker allows a website manager to easily control a number of map locations with popup infowindow content, all without having to dink with the google map API itself.

This snippet is great for managing a handful of map locations which is all many users need. Any more than that and something more sophisticated than unpublished pages would be needed. 
Pages: 1 ... 4 5 [6] 7 8 ... 11   Go Up
0 Members and 1 Guest are viewing this topic.