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&v=2&sensor=false&key=$api_code.getData()" type="text/javascript"></script>
## ------ Map DIV ------
<div id="${namespace}map_canvas" style="width: 100%; height: 350px;"> </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.
