Foren

Google Map in Journal

thumbnail
Rasto Rehak, geändert vor 14 Jahren.

Google Map in Journal

Junior Member Beiträge: 66 Beitrittsdatum: 08.03.07 Neueste Beiträge
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 :
<root>
  <dynamic-element name="name" type="text" repeatable="false"></dynamic-element>
  <dynamic-element name="description" type="text_area" repeatable="false"></dynamic-element>
  <dynamic-element name="lat" type="text" repeatable="false"></dynamic-element>
  <dynamic-element name="lng" type="text" repeatable="false"></dynamic-element>
</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" :
<h2>$name.data</h2>
<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 :
<root>
  <dynamic-element name="api_code" type="text" repeatable="false"></dynamic-element>
</root>

Entire application is written as a template "SHOW_MAP" for this structure:
## ------ NAMESPACE ------
#set ($namespace = $request.get('portlet-namespace')) 

## ------ Google Map Script ------
<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;sensor=false&amp;key=$api_code.getData()" type="text/javascript"></script>

## ------ Map DIV ------
<div id="${namespace}map_canvas" style="width: 100%; height: 350px;">&nbsp;</div>

<script type="text/javascript">
//<![CDATA[
var ${namespace}map;
var ${namespace}point;
var ${namespace}marker;

jQuery(document).ready(function () {
        ${namespace}map = new GMap2(document.getElementById("${namespace}map_canvas"));
	${namespace}map.setCenter(new GLatLng(48.6344675, 19.481551499999998), 13);
	${namespace}map.setUIToDefault();
	${namespace}map.setZoom(7);

#set ($document = $saxReaderUtil.readURL("http://localhost/c/journal/get_articles?groupId=@group_id@&structureId=LOCATION"))
#set ($root = $document.getRootElement())
#set ($articles = $root.selectNodes("/result-set/result/root")) 

## ------ Add Points to Map ------
#foreach($article in $articles)
 #set ($artId = $article.selectSingleNode("child::dynamic-element[@name='reserved-article-id']/dynamic-content").getText()) 
 #set ($lat = $article.selectSingleNode("child::dynamic-element[@name='lat']/dynamic-content").getText()) 
 #set ($lng = $article.selectSingleNode("child::dynamic-element[@name='lng']/dynamic-content").getText())
 #set ($name = $article.selectSingleNode("child::dynamic-element[@name='name']/dynamic-content").getText())
 #set ($description = $article.selectSingleNode("child::dynamic-element[@name='description']/dynamic-content").getText())
    ${namespace}point = new GLatLng( $lat, $lng );
    ${namespace}marker = new GMarker(${namespace}point);
       GEvent.addListener(${namespace}marker, "click", function() {
         ${namespace}showInfo( "$artId" , this );
        });
    
    ${namespace}map.addOverlay(${namespace}marker);

#end

});

function ${namespace}showInfo( articleId, marker ){
  var artUrl = "http://@portal_url@/c/journal/view_article_content?groupId=@group_id@&articleId="+articleId+"&templateId=LOC_DETAIL";
  jQuery.get(artUrl, 
  function(data){
          marker.openInfoWindowHtml(data);
  });

}

//]]>
</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 :
jQuery(window).unload( function(){
    GUnload();
  }
);


You can see running result on www.javateam.sk/web/admin/home.
thumbnail
Jonas Yuan, geändert vor 14 Jahren.

RE: Google Map in Journal

Liferay Master Beiträge: 993 Beitrittsdatum: 27.04.07 Neueste Beiträge
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, geändert vor 9 Jahren.

RE: Google Map in Journal

Junior Member Beiträge: 99 Beitrittsdatum: 18.04.13 Neueste Beiträge
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....
thumbnail
Raffy Theiss, geändert vor 9 Jahren.

RE: Google Map in Journal

New Member Beiträge: 5 Beitrittsdatum: 17.02.14 Neueste Beiträge
I think you have to set up first your Google license. If you don't have yet.
Marcos Laurito, geändert vor 9 Jahren.

RE: Google Map in Journal

Junior Member Beiträge: 99 Beitrittsdatum: 18.04.13 Neueste Beiträge
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, geändert vor 9 Jahren.

RE: Google Map in Journal

New Member Beiträge: 5 Beitrittsdatum: 03.05.13 Neueste Beiträge
Dis you find any solution please? I'm stuck in the same issue emoticon
thumbnail
Olaf Kock, geändert vor 9 Jahren.

RE: Google Map in Journal

Liferay Legend Beiträge: 6396 Beitrittsdatum: 23.09.08 Neueste Beiträge
Without going into debugging this, you might find some alternative pointers in James' article about the community activity map