Forums / Developer / How to integrate Google Maps API on eZ Publish?

How to integrate Google Maps API on eZ Publish?

Author Message

Adolfo Barragán

Wednesday 30 August 2006 3:02:40 am

I'm trying integrate Google Maps API on my site, so I've created a new class (location) with four attributes (name, text, latitude, longitude). I,ve created an override template for this class.

This template only generate javascript code for create map and some markers. But IE crashed when I try browse this page. After I read a lot of pages on web, the problem is because javascript code of template is locate on body section of HTML and executed before browse finish to render page. The question is solved if I put the javascript code between <head> tag and use body onload event. But, How can I solve this question? How can I put code generate by a node/view/full.tpl override on head section?

In this topic http://ez.no/community/forum/developer/ez_publish_spatial_extension_gis/re_ez_publish_spatial_extension_gis Paul Forsyt says he was developed an extension for google maps. Is this extension available?

Regards
Adolfo Barragán

Kristof Coomans

Wednesday 30 August 2006 3:07:05 am

Hello Adolfo

Take a look at this extension: http://ez.no/community/contribs/applications/gis_global_information_systems_extension_pubsvn/

independent eZ Publish developer and service provider | http://blog.coomanskristof.be | http://ezpedia.org

Adolfo Barragán

Wednesday 30 August 2006 5:32:22 am

I've downloaded this extension, and after a little overview I think this extension don't resolve question, because it use a pagelayout override instead an node/view/full override. , I don't figure how can I achieve show a map without override pagelayout

Where can I see a demo of this extension?

I've seen on many articles that a possible solution is put code innmediately before the closing </body> tag. I just put anhoter topic ( http://ez.no/community/forum/setup_design/use_of_set_block ) asking for a workaround meanwhile I study the extension. Can you have a look?

Thanks
Adolfo Barragán

Samuel Sauder

Wednesday 30 August 2006 6:36:43 am

Adolfo, my experience has been that the only difference between pagelayout and other templates is the variables available. The override system should be capable of what you want (although I don't know the specifics of the GIS extension yet)

In your set-block example I think your thinking is opposite of what it should be. The set-block exposes that variable to the global scope. If you want to pass a variable from pagelayout to another template, use include with a parameter being passed

                     	{include uri='design:mytemplate.tpl' myparm='myval'}

Adolfo Barragán

Wednesday 30 August 2006 10:08:10 am

Sorry, but I should expose a bad explanation:

I need retrieve in pagelayout.tpl a variable set in a "node/view/full.tpl" override template:

1. Pagelayout.tpl

<html>
<head>...</head>
<body>
...
<div id="maincontent">
  {$module_result.content}
</div>
...
  {$myVariable}
</body>
</html>

And <b>$myVariable</b> is set in "override.tpl"

<div id="map"></div>
...
{set-block variable=myVariable scope=global}
  some javascript and template mixed code
{/set-block}

$myVariable is accesible from pagelayot.tpl?

Thanks in advance
Adolfo Barragán

Björn Dieding@xrow.de

Wednesday 30 August 2006 2:05:45 pm

> Where can I see a demo of this extension?

Hi guys unfortunatelly we don't have a demo online since this is used in an intranet.

Other then that...

you can of course reuse the code from the override paylayout templates in any other template....

Looking for a new job? http://www.xrow.com/xrow-GmbH/Jobs
Looking for hosting? http://hostingezpublish.com
-----------------------------------------------------------------------------
GMT +01:00 Hannover, Germany
Web: http://www.xrow.com/

Adolfo Barragán

Wednesday 30 August 2006 11:52:44 pm

Ok, thanks to all.

Perhaps the better alternative is to override pagelayout and to launch a new windows when user request a map.

Regards
Adolfo Barragán

Adolfo Barragán

Thursday 31 August 2006 12:17:49 am

Solved:

I solved this question by using {set-block} alternative. So I don't need override pagelayout, I only need include a variable {$myMap} inmediately before of closing </body> tag and set this variable on googlemap.tpl (override of node/view/full.tpl) with {set-block variable=myMap scope=global}

Thanks to all
Adolfo Barragán

André R.

Thursday 31 August 2006 12:31:22 am

Why not solve a client side problem on the client side ?

add this to your included javascript file (if you have one, otherwise put this in your head section)

function $addEvent(el,t,h){
	if (el.addEventListener) el.addEventListener(t, h, false);
	else if (el.attachEvent) el.attachEvent('on' + t, h);
	else {	var oldOn = el['on' + t];
			if (typeof oldOn != 'function')el['on' + t] = h;
			else el['on' + t] = function(){h(); oldOn();};
	}

}

Inside your template code, do something like:

$addEvent(document.body,'load',myGoogleMapsStartFunction);

But be aware of the following:
1.body.onload triggers AFTER all images and other content is loaded
2. Ie6 is known to leak memory if you do not realese / remove this event listener on unload

To fiks 1. call your function in the bottom of your page instead of the above, something like this will do:

if (myGoogleMapsStartFunction) myGoogleMapsStartFunction();

If this is done instead, you don't have problem 2. any more either.

eZ Online Editor 5: http://projects.ez.no/ezoe || eZJSCore (Ajax): http://projects.ez.no/ezjscore || eZ Publish EE http://ez.no/eZPublish/eZ-Publish-Enterprise-Subscription
@: http://twitter.com/andrerom

Joe Kepley

Friday 27 October 2006 10:10:53 am

If you're interested, we've released a datatype extension that allows you to store lat/lon data in eZ and provides a mini-map for point-and-click or address search data entry:

http://ez.no/community/contribs/datatypes/google_maps_location_datatype

Michael Maclean

Tuesday 31 October 2006 6:21:07 am

I had this problem a while back too, I discovered that the workaround was to have the JavaScript block deferred, like so:

<script type="text/javascript" defer="defer">
...
</script>

Which means that the script is not executed until the onload() event is fired (or thereabout). It worked for us, and avoided having to hack the pagelayout.tpl.

eZpedia community documentation project | http://ezpedia.org