组合视图 统一视图 树状图
讨论主题 [ 上一个 | 下一个 ]
toggle
Rasto Rehak
Google Map in Journal
2009年9月30日 上午2:13
答复

Rasto Rehak

等级: Junior Member

帖子: 62

加入日期: 2007年3月8日

最近的帖子

This post is an example how to create Google Map application in Liferay Portal using only Journal tools.
Let say we want to show on gmap our offices. Create the structure "LOCATION" first :
1<root>
2  <dynamic-element name='name' type='text' repeatable='false'></dynamic-element>
3  <dynamic-element name='description' type='text_area' repeatable='false'></dynamic-element>
4  <dynamic-element name='lat' type='text' repeatable='false'></dynamic-element>
5  <dynamic-element name='lng' type='text' repeatable='false'></dynamic-element>
6</root>

Fields name and description are pretty clear, lat and lng are latitude and longitude of the location.
For this structure we can create a template "LOC_DETAIL" :
1<h2>$name.data</h2>
2<p>$description.data</p>

It's now up to you to create several articles in this structure.

The google map can be shown either directly as an generic web content but using a template does nice trick, we can parametrize display of the map. Structure "GOOGLE_MAP" has so far only one element but you can enrich it later with more parameters :
1<root>
2  <dynamic-element name='api_code' type='text' repeatable='false'></dynamic-element>
3</root>

Entire application is written as a template "SHOW_MAP" for this structure:
 1## ------ NAMESPACE ------
 2#set ($namespace = $request.get('portlet-namespace'))
 3
 4## ------ Google Map Script ------
 5<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;sensor=false&amp;key=$api_code.getData()" type="text/javascript"></script>
 6
 7## ------ Map DIV ------
 8<div id="${namespace}map_canvas" style="width: 100%; height: 350px;">&nbsp;</div>
 9
10<script type="text/javascript">
11//<![CDATA[
12var ${namespace}map;
13var ${namespace}point;
14var ${namespace}marker;
15
16jQuery(document).ready(function () {
17        ${namespace}map = new GMap2(document.getElementById("${namespace}map_canvas"));
18    ${namespace}map.setCenter(new GLatLng(48.6344675, 19.481551499999998), 13);
19    ${namespace}map.setUIToDefault();
20    ${namespace}map.setZoom(7);
21
22#set ($document = $saxReaderUtil.readURL("http://localhost/c/journal/get_articles?groupId=@group_id@&structureId=LOCATION"))
23#set ($root = $document.getRootElement())
24#set ($articles = $root.selectNodes("/result-set/result/root"))
25
26## ------ Add Points to Map ------
27#foreach($article in $articles)
28 #set ($artId = $article.selectSingleNode("child::dynamic-element[@name='reserved-article-id']/dynamic-content").getText())
29 #set ($lat = $article.selectSingleNode("child::dynamic-element[@name='lat']/dynamic-content").getText())
30 #set ($lng = $article.selectSingleNode("child::dynamic-element[@name='lng']/dynamic-content").getText())
31 #set ($name = $article.selectSingleNode("child::dynamic-element[@name='name']/dynamic-content").getText())
32 #set ($description = $article.selectSingleNode("child::dynamic-element[@name='description']/dynamic-content").getText())
33    ${namespace}point = new GLatLng( $lat, $lng );
34    ${namespace}marker = new GMarker(${namespace}point);
35       GEvent.addListener(${namespace}marker, "click", function() {
36         ${namespace}showInfo( "$artId" , this );
37        });
38   
39    ${namespace}map.addOverlay(${namespace}marker);
40
41#end
42
43});
44
45function ${namespace}showInfo( articleId, marker ){
46  var artUrl = "http://@portal_url@/c/journal/view_article_content?groupId=@group_id@&articleId="+articleId+"&templateId=LOC_DETAIL";
47  jQuery.get(artUrl,
48  function(data){
49          marker.openInfoWindowHtml(data);
50  });
51
52}
53
54//]]>
55</script>

What does it do? First lines creates google map itself. At line 22 we read the list of articles with structure "LOCATION", iterate the articles and write out javascript code to create a marker for each location. Function showInfo() puts the article templated by "LOC_DETAIL" to info window of this marker.

One more remark, in showInfo I am using @portal_url@ as a host, to read XML articles I use "localhost". The only problem is that my host is behind firewall, proxy,nat, virtualhost ... whatever that prevents it to call himself under his name.

Btw, I forgot to add correct unload of google map :
1jQuery(window).unload( function(){
2    GUnload();
3  }
4);


You can see running result on www.javateam.sk/web/admin/home.
Jonas Yuan
RE: Google Map in Journal
2009年9月29日 上午4:28
答复

Jonas Yuan

等级: Liferay Master

帖子: 993

加入日期: 2007年4月26日

最近的帖子

Hi Rasto,

Thank you. It is good article. Add vote +1.

Jonas Yuan
-----------------
The Author of Liferay Books:
Liferay Portal 5.2 Systems Development
Liferay Portal Enterprise Intranets
Marcos Laurito
RE: Google Map in Journal
2014年4月4日 上午8:46
答复

Marcos Laurito

等级: Junior Member

帖子: 78

加入日期: 2013年4月18日

最近的帖子

I'm trying to use this example in Liferay 6.1.1 GA2 with no success.
Can you help me??

If a try to implement this exact example, my web content viewer shows nothing and the firefox console show this error:
jQuery object not defined.

I've solved this issue by linking the jQuery files by uploading it to the D&M Library.
Now i can see a map i shown for a few seconds and then dissapear and my web content viewer shows empty and no error is thrown...

Any help?

My primary goal is to be able to show a map in my Liferay with multiple locations marked. I've tried this using some plugins that are available at the marketplace, but none has this option....
Raffy Theiss
RE: Google Map in Journal
2014年4月7日 下午9:12
答复

Raffy Theiss

等级: New Member

帖子: 5

加入日期: 2014年2月16日

最近的帖子

I think you have to set up first your Google license. If you don't have yet.
Marcos Laurito
RE: Google Map in Journal
2014年4月8日 上午5:05
答复

Marcos Laurito

等级: Junior Member

帖子: 78

加入日期: 2013年4月18日

最近的帖子

Raffy Theiss:
I think you have to set up first your Google license. If you don't have yet.


I've set up the google license. In fact i know that my google key is working because i use the same in other things and works ok.
i've realized that the problem is in the script when it tries to get the articles collection, is not reading any article...
Wafa Bouyahi
RE: Google Map in Journal
2014年8月10日 上午11:11
答复

Wafa Bouyahi

等级: New Member

帖子: 5

加入日期: 2013年5月3日

最近的帖子

Dis you find any solution please? I'm stuck in the same issue emoticon
Olaf Kock
RE: Google Map in Journal
2014年8月10日 下午11:59
答复

Olaf Kock

LIFERAY STAFF

等级: Liferay Legend

帖子: 1797

加入日期: 2008年9月23日

最近的帖子

Without going into debugging this, you might find some alternative pointers in James' article about the community activity map