Tribune

Home » Liferay Portal » English » 2. Using Liferay » General

Vista Combinata Vista Piatta Vista ad Albero
Discussioni [ Precedente | Successivo ]
Rasto Rehak
Google Map in Journal
30 settembre 2009 2.13
Risposta

Rasto Rehak

Punteggio: Junior Member

Messaggi: 63

Data di Iscrizione: 8 marzo 2007

Messaggi recenti

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
29 settembre 2009 4.28
Risposta

Jonas Yuan

Punteggio: Liferay Master

Messaggi: 993

Data di Iscrizione: 26 aprile 2007

Messaggi recenti

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
4 aprile 2014 8.46
Risposta

Marcos Laurito

Punteggio: Junior Member

Messaggi: 91

Data di Iscrizione: 18 aprile 2013

Messaggi recenti

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
7 aprile 2014 21.12
Risposta

Raffy Theiss

Punteggio: New Member

Messaggi: 5

Data di Iscrizione: 16 febbraio 2014

Messaggi recenti

I think you have to set up first your Google license. If you don't have yet.
Marcos Laurito
RE: Google Map in Journal
8 aprile 2014 5.05
Risposta

Marcos Laurito

Punteggio: Junior Member

Messaggi: 91

Data di Iscrizione: 18 aprile 2013

Messaggi recenti

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
10 agosto 2014 11.11
Risposta

Wafa Bouyahi

Punteggio: New Member

Messaggi: 5

Data di Iscrizione: 3 maggio 2013

Messaggi recenti

Dis you find any solution please? I'm stuck in the same issue emoticon
Olaf Kock
RE: Google Map in Journal
10 agosto 2014 23.59
Risposta

Olaf Kock

LIFERAY STAFF

Punteggio: Liferay Legend

Messaggi: 3561

Data di Iscrizione: 23 settembre 2008

Messaggi recenti

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