googlemap ezxmltext custom tag

packages/ezgmaplocation_extension/documents/TODO.txt

@@ -18,7 +18,8 @@ content/edit:
 content/view:
 * use zoom level and map type as stored in content/edit
 
+ezxmltext custom tag:
+* Be able to visually edit the marker and zoom level
 
 General:
-* Merge back gmap.tpl from gmaplocation datatype for showing several nodes on a map
-* Add ezxmltext custom tag for inserting map in content 
+* Merge back gmap.tpl from gmaplocation datatype for showing several nodes on a map

packages/ezgmaplocation_extension/ezextension/ezgmaplocation/README

@@ -32,7 +32,7 @@ Using either phpmyadmin (easiest) or shell/console commands.
 Sql files are also provided for postgresql and oracle - refer to the
 database documentation on how to execute queries from a command-line clients
 
-6.) Now you can add the ezgmaplocation datatype like any other datatype when editing classes.
+6.) Now you can add the ezgmaplocation datatype like any other datatype when editing classes, or add a ezxmltext custom tag that renders a map.
 
 
 Use (editing)
@@ -72,3 +72,10 @@ results based on how close the nodes are to the given coordinates.
  Also see 'arccosine' parameter in combination with 'as_object', false() to be able to get value to easily calculate distance.
  Example use: user x is 2,5 km away from you. Or Oslo, Norway is 416.8km from Stockholm, Sweden.
 
+
+Use (ezxmltext custom tag)
+---------------------------
+
+While editing an XML block, add a custom tag (<?> icon on eZOE toolbar), choose googlemap and relevant marker and container data,
+such as latitude, longitude, zoom level and map size. Beware, there is no actual geocoding of the address attribute, which is used just as a
+string rendered before the map.

packages/ezgmaplocation_extension/ezextension/ezgmaplocation/design/standard/templates/content/datatype/view/ezxmltags/googlemap.tpl

@@ -0,0 +1,115 @@
+{def $myrandomid = rand(0,9999999)}
+
+{run-once}
+<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor={ezini('GMapSettings', 'UseSensor', 'ezgmaplocation.ini')}"></script>
+<script type="text/javascript">
+{literal}
+
+function eZGmapLocation_MapView( mapdata, attributeId, latitude, longitude, zoom )
+{
+	mapdata.directionsDisplay = new google.maps.DirectionsRenderer();
+	if( latitude && longitude )
+	{
+		var startPoint = new google.maps.LatLng( latitude, longitude );		
+	} else {
+		var startPoint = new google.maps.LatLng( 0, 0 );
+	}
+
+	mapdata.map = new google.maps.Map(	document.getElementById( 'ezgml-map-' + attributeId ),
+				{	center: startPoint,
+					zoom : zoom,
+					mapTypeId: google.maps.MapTypeId.ROADMAP
+				} );
+
+	var marker = new google.maps.Marker({ map: mapdata.map, position: startPoint });
+	mapdata.directionsDisplay.setMap(mapdata.map);
+	mapdata.stepDisplay = new google.maps.InfoWindow();
+}
+
+  function calcRoute(mapdata, attributeId, latitude, longitude) {
+    for (i = 0; i < mapdata.markerArray.length; i++) {
+      mapdata.markerArray[i].setMap(null);
+    }
+    mapdata.markerArray = [];
+
+    var start = $('#fromaddress-' + attributeId).val();
+    var latlng = new google.maps.LatLng(latitude,longitude);
+
+    var request = {
+        origin:start, 
+        destination:latlng,
+        travelMode: google.maps.DirectionsTravelMode.DRIVING,
+        unitSystem: google.maps.UnitSystem.METRIC
+    };
+    mapdata.directionsService.route(request, function(response, status) {
+      if (status == google.maps.DirectionsStatus.OK) {
+      var warnings = document.getElementById("warnings_panel");
+	    warnings.innerHTML = "<b>" + response.routes[0].warnings + "</b>";
+        mapdata.directionsDisplay.setDirections(response);
+        showSteps(mapdata, response);
+      }
+    });
+  }
+
+  function showSteps(mapdata, directionResult) {
+    var myRoute = directionResult.routes[0].legs[0];
+    for (var i = 0; i < myRoute.steps.length; i++) {
+      var marker = new google.maps.Marker({
+        position: myRoute.steps[i].start_point, 
+        map: mapdata.map,
+        zIndex:5
+      });
+      attachInstructionText(mapdata.map, marker, myRoute.steps[i].instructions);
+      mapdata.markerArray[i] = marker;
+    }
+  }
+
+  function attachInstructionText(map, marker, text) {
+    google.maps.event.addListener(marker, 'click', function() {
+      stepDisplay.setContent(text);
+      stepDisplay.open(map, marker);
+    });
+  }  
+
+</script>
+{/literal}
+
+{/run-once}
+
+<script type="text/javascript">
+	var mapdata_{$myrandomid} = {ldelim}
+		map: null,
+		directionDisplay: null,
+	 	directionsService: new google.maps.DirectionsService(),
+	 	stepDisplay: null,
+	 	markerArray: []
+	{rdelim}
+{literal}
+$('document').ready(function() {
+{/literal}
+	eZGmapLocation_MapView( mapdata_{$myrandomid}, {$myrandomid}, {first_set( $latitude, '0.0')}, {first_set( $longitude, '0.0')}, {$zoomlevel} );
+	$('#mapdirections-{$myrandomid}').submit(function(){ldelim}
+	calcRoute(mapdata_{$myrandomid}, "{$myrandomid}", {$latitude}, {$longitude}); return false;
+{literal}
+	});
+});
+{/literal}
+</script>
+
+<div class="googlemap">
+	<div class="maplabel block">
+		<label>{'Latitude'|i18n('extension/ezgmaplocation/datatype')}:</label> {$latitude}
+		<label>{'Longitude'|i18n('extension/ezgmaplocation/datatype')}:</label> {$longitude}
+		<label>{'Address'|i18n('extension/ezgmaplocation/datatype')}:</label> {$address}
+	</div>
+	<div id="ezgml-map-{$myrandomid}" class="mapblock" style="width: {$width}; height: {$height};"></div>
+	<div id="warnings_panel" style="text-align:center"></div>
+	<div id="ezgml-getdirection-{$myrandomid}">
+		<form id="mapdirections-{$myrandomid}">
+			<label>{'Get directions from:'|i18n('extension/ezgmaplocation/datatype')}</label>
+			<input id="fromaddress-{$myrandomid}" type="text" name="fromaddress" class="search-box-map" value="" placeholder="{'From address'|i18n('extension/ezgmaplocation/datatype')}">
+			<input type="submit" class="button calculate" value="{'Get Directions'|i18n('extension/ezgmaplocation/datatype')}" />
+		</form>
+		<div class="clearfix"></div>
+	</div>
+</div>

packages/ezgmaplocation_extension/ezextension/ezgmaplocation/settings/content.ini.append.php

@@ -4,4 +4,23 @@
 ExtensionDirectories[]=ezgmaplocation
 AvailableDataTypes[]=ezgmaplocation
 
+[CustomTagSettings]
+AvailableCustomTags[]=googlemap
+
+[googlemap]
+CustomAttributes[]
+CustomAttributes[]=latitude
+CustomAttributes[]=longitude
+CustomAttributes[]=address
+CustomAttributes[]=width
+CustomAttributes[]=height
+CustomAttributes[]=zoomlevel
+CustomAttributesDefaults[latitude]=40.824303
+CustomAttributesDefaults[longitude]=15.707542
+CustomAttributesDefaults[address]=Via Iscalunga, 55 / I-85020 Filiano PZ / Italy
+CustomAttributesDefaults[width]=570px
+CustomAttributesDefaults[height]=300px
+CustomAttributesDefaults[zoomlevel]=13
+
+
 */ ?>

packages/ezgmaplocation_extension/ezextension/ezgmaplocation/translations/ita-IT/translation.ts

@@ -52,5 +52,18 @@
         <source>Invalid Latitude/Longitude input.</source>
         <translation>Inserimento della Latitudine/Longitudine non valido.</translation>
     </message>
+    <message>
+        <source>Get directions from:</source>
+        <translation>Calcola il percorso da:</translation>
+    </message>
+    <message>
+        <source>From address</source>
+        <translation>Indirizzo di partenza</translation>
+    </message>
+    <message>
+        <source>Get Directions</source>
+        <translation>Calcola il percorso</translation>
+    </message>
+
 </context>
 </TS>