lundi 12 avril 2010

JSF 2 Composite Google Maps Component

I needed a simple Google Maps component for some application. Although there were some examples, none of them was using the composite approach, which I wanted to use for its benefits.

I thould it would be useful to share my example, so here it is.

It accepts a couple of parameters (but has reasonible defaults for most of them): zoom, address, ...

Maybe I'll improve this later. Any suggestion welcome.

<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">
<html xmlns=""

    <!-- INTERFACE -->
        <composite:attribute name="zoom" type="java.lang.Integer" default="14" />
        <composite:attribute name="width" type="java.lang.Integer" default="400" />
        <composite:attribute name="height" type="java.lang.Integer" default="300" />
        <composite:attribute name="address" type="java.lang.String" required="true" />
        <composite:attribute name="mapType" type="java.lang.String" default="ROADMAP" />
        <composite:attribute name="lat" type="java.lang.Number" default="0" />
        <composite:attribute name="long" type="java.lang.Number" default="0" />

        <h:outputScript target="head">
            var geocoder;
            var map;

            function loadApi(src) {
                var scriptElement = document.createElement("script");
                scriptElement.src = src;
                scriptElement.type = "text/javascript";
                var headElement = document.getElementsByTagName("head")[0];
            function loadGMapsApi() {
                if (google) {

            function initializeMap(elementId) {
                geocoder = new google.maps.Geocoder();
                var latlng = new google.maps.LatLng(#{}, #{cc.attrs.long});
                var myOptions = {
                    zoom: #{cc.attrs.zoom},
                    center: latlng,
                    mapTypeId: google.maps.MapTypeId.#{cc.attrs.mapType}
                map = new google.maps.Map(document.getElementById(elementId), myOptions);

                function gotoAddress(address) {
                if (geocoder) {
                    geocoder.geocode( { 'address': address}, function(results, status) {
                        if (status == google.maps.GeocoderStatus.OK) {
                            var marker = new google.maps.Marker({
                                map: map,
                                position: results[0].geometry.location
                        } else {
                            //alert("Geocode was not successful for the following reason: " + status);
        <h:panelGroup layout="block" style="width: #{cc.attrs.width}px; height: #{cc.attrs.height}px;" id="map_canvas" />
        <script type="text/javascript" src=""/>