[snippet] GoogleMap

386 Posts

therebechips Reply #1, 20 years, 3 months ago

This snippet accepts a US zip or UK postcode, geocodes it on the fly using the Google earth engine (keyhole markup language) and outputs a Google map of the location. You will need a Google API key for your domain. Should be good for contact maps, store locators etc.

(It may work for other countries too but I haven’t tested it)

/*
   Snippet Name: GoogleMap
   Short Desc: Outputs a Google map for a given postcode
   Created By: Mark Croxton ([email protected])
   Last modified: 03/07/2006
   Version: 1.0
   Google Map API Version: 2.0

   Example call: [!GoogleMap?key=`ABQIAAAA...` &zip=`bn14fb` &title=`My Office` &address=`101 My Road, My town, My Country` &width=`300` &height=`300`!]

   Params:
    &key  = Google API Key (string - required) - see http://www.google.com/apis/maps/
    &zip  = UK or US postal code (string - required)
    &title  = Map title - used in the pop-up bubble (string)
   	&address  = Full address - used in the pop-up bubble (string)
   	&width  = Map width (integer)
   	&height = Map height (integer)
	&zoom = Map zoom level (integer)
	&mapid = Map div css id (string)
	&bubblewidth = pop-up bubble width (integer)
	$phmode  = output to placeholders? (recommended) (boolean)
   		[+gmapjs+] place in the head of your template file
   		[+gmap+] place where you want the map to appear
*/

$key = isset($key)? "$key" : '';
$zip = isset($zip)? "$zip" : '';
$title = isset($title)? "$title" : '';
$address = isset($address)? "$address" : '';
$width = isset($width)? "$width" : '400';
$height = isset($height)? "$height" : '400';
$zoom = isset($zoom)? "$zoom" : '15';
$mapid = isset($mapid)? "$mapid" : 'map';
$bubblewidth = isset($bubblewidth)? "$bubblewidth" : '230';
$phmode = (!isset($phmode)) ? false : ($phmode==true);

# geocode the postcode
$coord = geocode($zip); // coord[0]=lng and coord[1]=lat

$gmapjs = '

<script src="http://maps.google.com/maps?file=api&v=2&key='.$key.'" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[

/* ------------------------------------------------------
   addEvent
   ------------------------------------------------------ */
function addEvent(elm, evType, fn, useCapture) {
	if (elm.addEventListener) { 
	elm.addEventListener(evType, fn, useCapture); 
		return true; 
	}
	else if (elm.attachEvent) { 
	var r = elm.attachEvent(\'on\' + evType, fn); 
	EventCache.add(elm, evType, fn);
		return r; 
	}
	else {
		elm[\'on\' + evType] = fn;
	}
}
var EventCache = function(){
	var listEvents = [];
	return {
		listEvents : listEvents,	
		add : function(node, sEventName, fHandler, bCapture){
			listEvents.push(arguments);
		},	
		flush : function(){
			var i, item;
			for(i = listEvents.length - 1; i >= 0; i = i - 1){
				item = listEvents[i];				
				if(item[0].removeEventListener){
					item[0].removeEventListener(item[1], item[2], item[3]);
				};				
				/* From this point on we need the event names to be prefixed with */
				if(item[1].substring(0, 2) != "on"){
					item[1] = "on" + item[1];
				};				
				if(item[0].detachEvent){
					item[0].detachEvent(item[1], item[2]);
				};				
				item[0][item[1]] = null;
			};
		}
	};
}();
addEvent(window,\'unload\',EventCache.flush, false);

function GloadMap() {
    if (GBrowserIsCompatible()) {
    var map = new GMap2(document.getElementById("'.$mapid.'"));
    map.setCenter(new GLatLng('.$coord[0].','.$coord[1].'),'.$zoom.');             
    map.addControl(new GSmallMapControl());
    map.addControl(new GMapTypeControl());
    
    // Create our "tiny" marker icon
    var icon = new GIcon();
    icon.image = "http://labs.google.com/ridefinder/images/mm_20_red.png";
    icon.shadow = "http://labs.google.com/ridefinder/images/mm_20_shadow.png";
    icon.iconSize = new GSize(12, 20);
    icon.shadowSize = new GSize(22, 20);
    icon.iconAnchor = new GPoint(6, 20);
    icon.infoWindowAnchor = new GPoint(5, 1);

    // Creates one of our tiny markers at the given point
    function createMarker(point, index) {
      var marker = new GMarker(point, icon);
      var myMarkerContent = "<div style=\"width:'.$bubblewidth.'px; overflow:auto;\"><h4>'.$title.'</h4><p>'.$address.'</p></div>";
      map.addOverlay(marker);
      marker.openInfoWindowHtml(myMarkerContent);
      GEvent.addListener(marker, "click", function() {
        marker.openInfoWindowHtml(myMarkerContent);
      });
    }
    createMarker(new GPoint('.$coord[0].','.$coord[1].'));
	}
}
//initialise Google map
addEvent(window, \'load\', GloadMap, false);
addEvent(window, \'unload\', GUnload, false);
//]]>
</script>
';

$gmap ='<div id="'.$mapid.'" style="width: '.$width.'px; height: '.$height.'px"></div>';

if ($phmode) {
	# output to placeholders
	$modx->setPlaceholder('gmapjs', $gmapjs);
	$modx->setPlaceholder('gmap', $gmap);
	return;
} else {
	$output =  $gmapjs."\n".$gmap;
	return $output;
}

/* ---------------------------------------------------
   Functions
   --------------------------------------------------- */
function geocode($postcode) {	
	$postcode = urlencode($postcode);
	$coord = array();	
	// The URL of google to append the postcode
    $url = "http://maps.google.com/maps?output=kml&q=";
	$haystack = file_get_contents($url.$postcode);
	$start = strpos($haystack, '<coordinates>') + 13;
	$end = strpos($haystack, '</coordinates>');
	$coords = substr($haystack, $start, ($end-$start));
	$coord = explode(",", $coords);	
	return $coord;
}

Snippets: GoogleMap | FileDetails | Related Plugin: SSL

2,542 Posts

heliotrope Reply #2, 20 years, 3 months ago

How lucky I am !!!!!
I was looking for this feature.
I will test and let you know if it works for french location.

Thx a lot.

:-)

Made with MODx : [url=http://www.copadel.com]copadel, fruits et l

386 Posts

therebechips Reply #3, 20 years, 3 months ago

I made an error in the example snippet call... the api key should be passed as ’key’ not ’api’:

 [!GoogleMap?key=`ABQIAAAA...` &zip=`bn14fb` &title=`My Office` &address=`101 My Road, My town, My Country` &width=`300` &height=`300`!]

Snippets: GoogleMap | FileDetails | Related Plugin: SSL

3,975 Posts

Zaigham (aka zi) Reply #4, 20 years, 3 months ago

Hi therebechips,

Thanks for nice snippet

but please post it to http://modxcms.com/downloads.html after posting it there a new topic will be automatically created in http://modxcms.com/forums/index.php/board,163.0.html

I am locking this thread to prevent further posting.

regards.

zi

Zaigham R - MODX Professional | Skype | Email | Twitter

Digging the interwebs for #MODX gems and bringing it to you. modx.link