Google Map

Tuesday 20 April 2010 2:46:21 am

Good morning,

I would like to embed a google map on my ez-publish website but first, I'd like to ask you a few questions :

¤ After having embedded my google map, can users add a new point with its icon or can they add a new direction/itinerary in the back office ?

¤ Is it possible, in the front office of the website, to propose a form to users thanks to which they could propose photographs or commentaries linked with a point ?

Thank you,

Frink

Friday 23 April 2010 1:53:20 am

hello,

another extension that uses version 3 of the api googlemap: http://ez.no/developer/contribs/datatypes/google_maps_version_3

tks

Abdelkader RHOUATI

Blog (french) : http://arhouati.com
----
Extension arh_jdebug : EzDebug using jquery

Wednesday 05 May 2010 8:52:08 am

There actually already is an extension for this included in the latest ezpublish install, if you select the ezflow installation.

The official extension is this one:
http://projects.ez.no/ezgmaplocation

The only problem is made for v2, in the backoffice which means you need a key to see the map, but you can easily resolve this by replacing the code to display the map which is in these 2 files:

ezgmaplocation/design/standard/templates/content/datatype/edit/ezgmaplocation.tpl
ezgmaplocation/design/standard/templates/content/datatype/view/ezgmaplocation.tpl

with this code:
--------------------------------

{if is_set( $attribute_base )|not}
{def $attribute_base = 'ContentObjectAttribute'}
{/if}
<div class="block">
{def $gmaplocal = ezini('RegionalSettings', 'ContentObjectLocale', 'site.ini')}
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&region={$gmaplocal|extract_left(2)}&language={$gmaplocal|extract_left(2)}"></script>
{undef $gmaplocal}
<div class="element">
<div class="block">
<label>{'Latitude'|i18n('extension/ezgmaplocation/datatype')}:</label>
<input id="ezcoa-{if ne( $attribute_base, 'ContentObjectAttribute' )}{$attribute_base}-{/if}{$attribute.contentclassattribute_id}_{$attribute.contentclass_attribute_identifier}_latitude" class="ezcca-{$attribute.object.content_class.identifier}_{$attribute.contentclass_attribute_identifier} ezcc-{$attribute.object.content_class.identifier} box" type="text" name="{$attribute_base}_data_gmaplocation_latitude_{$attribute.id}" value="{$attribute.content.latitude}" />
</div>

<div class="block">
<label>{'Longitude'|i18n('extension/ezgmaplocation/datatype')}:</label>
<input id="ezcoa-{if ne( $attribute_base, 'ContentObjectAttribute' )}{$attribute_base}-{/if}{$attribute.contentclassattribute_id}_{$attribute.contentclass_attribute_identifier}_longitude" class="ezcca-{$attribute.object.content_class.identifier}_{$attribute.contentclass_attribute_identifier} ezcc-{$attribute.object.content_class.identifier} box" type="text" name="{$attribute_base}_data_gmaplocation_longitude_{$attribute.id}" value="{$attribute.content.longitude}" />
</div>
<div class="block">
<label>{'Update Location'|i18n('extension/ezgmaplocation/datatype')}:</label>
<input class="defaultbutton" type="button" id="ezgml-update-button-{$attribute.id}" value="{'Update values'|i18n('extension/ezgmaplocation/datatype')}" onclick="javascript:void( null ); return false" />
</div>
</div>
<div class="element">
{run-once}
{*<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key={ezini('SiteSettings','GMapsKey')}" type="text/javascript"></script>*}
<script type="text/javascript">
{literal}
/*
Rewriten by Paul Leclercq for google API V3
Attention cette version necessite jquery
*/

var geocoder;
var map;
var infowindow = new google.maps.InfoWindow();
var marker;
function glocate_initialize_{/literal}{$attribute.id}{literal}() {
geocoder = new google.maps.Geocoder();
{/literal}
{if and(is_set($attribute.content.latitude), $attribute.content.latitude|ne("") )}
var latlng = new google.maps.LatLng({$attribute.content.latitude}, {$attribute.content.longitude}); /* Zoom on Paris by default */
{else}
var latlng = new google.maps.LatLng(46.2276, 2.2137); /* Zoom on Paris by default */
{/if}
{literal}
var myOptions = {
zoom: 5,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map_canvas-{/literal}{$attribute.id}{literal}"), myOptions);

{/literal}
{if and(is_set($attribute.content.latitude), $attribute.content.latitude|ne(""))}
marker = new google.maps.Marker({ldelim}
map: map,
position: latlng
{rdelim});
{/if}
{literal}
}

function codeAddress_{/literal}{$attribute.id}{literal}() {
var address = $("#ezgml-address-{/literal}{$attribute.id}{literal}").val();
if (geocoder) {
geocoder.geocode( { 'address': address}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
map.setCenter(results[0].geometry.location);
marker = new google.maps.Marker({
map: map,
position: results[0].geometry.location
});
updateLatLngFields( results[0].geometry.location );
} else {
alert("Geocode was not successful for the following reason: " + status);
}
});
}
}

function updateLatLngFields( point )
{
{/literal}
$("#ezcoa-{if ne( $attribute_base, 'ContentObjectAttribute' )}{$attribute_base}-{/if}{$attribute.contentclassattribute_id}_{$attribute.contentclass_attribute_identifier}_latitude").val( point.lat() );
$("#ezcoa-{if ne( $attribute_base, 'ContentObjectAttribute' )}{$attribute_base}-{/if}{$attribute.contentclassattribute_id}_{$attribute.contentclass_attribute_identifier}_longitude").val( point.lng() );
{literal}
};
{/literal}
</script>
{/run-once}
<script type="text/javascript">
$().ready(function() {ldelim}
glocate_initialize_{$attribute.id}();
{rdelim});

</script>
<div id="map_canvas-{$attribute.id}" style="width: 700px; height: 280px;"></div>
<input type="text" id="ezgml-address-{$attribute.id}" size="54" name="{$attribute_base}_data_gmaplocation_address_{$attribute.id}" value="{$attribute.content.address}"/>
<input class="defaultbutton" type="button" id="ezgml-address-button-{$attribute.id}" value="{'Find address'|i18n('extension/ezgmaplocation/datatype')}" onclick="codeAddress_{$attribute.id}(); return false;"/>
</div>
<div class="break"></div>
</div>

------------------------------------

or else create overrides for your backoffice siteaccess design by creating on override of these files in these folders:

ezgmaplocation/design/admin/templates/content/datatype/edit/ezgmaplocation.tpl
ezgmaplocation/design/admin/templates/content/datatype/view/ezgmaplocation.tpl

This should normaly work. But feedback would be welcome.