Location Aware PrimeFaces Mobile Maps

One interesting PrimeFaces Mobile sample app is the Maps, it demonstrates how to use PrimeFaces maps component in a mobile environment. It uses HTML5 geolocation api to find the location of the user and displays it on map. Simple;

<f:view xmlns="http://www.w3.org/1999/xhtml"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:h="http://java.sun.com/jsf/html"
    xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:p="http://primefaces.prime.com.tr/ui"
	xmlns:pm="http://primefaces.prime.com.tr/mobile"
	contentType="text/html">

    <pm:page title="Maps">

        <f:facet name="postinit">
            <h:outputScript library="primefaces" name="gmap/gmap.js" />
			<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
            <script type="text/javascript">
                function findMe() {
                    navigator.geolocation.getCurrentPosition(
                        function(position) {
                            var map = gmap.getMap(),
                            latlng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);

                            map.setCenter(latlng);

                            var marker = new google.maps.Marker({
                                position: latlng
                            });

                            marker.setMap(map);
                        },
                        function(error) {
                            alert(error.message);
                        },
                        {
                           enableHighAccuracy: true
                        });
                }

            </script>
		</f:facet>

        <!-- Main View -->
        <pm:view id="main" swatch="a">
            <pm:header title="Maps">

            </pm:header>

            <pm:content>
                <p:gmap center="41.381542, 2.122893" zoom="15" type="HYBRID" style="width:100%;height:15em" widgetVar="gmap"/>

                <p:separator />

                <pm:commandButton type="button" value="My Location" onclick="findMe()"/>
            </pm:content>
        </pm:view>
    </pm:page>

</f:view>

I’ve tested it on iPhone simulator and worked fine, on my HTC desire I can’t seem to get the location properly, maybe a setting is missing as I always hit this. You can try the maps at PrimeFaces Labs.

And yes that is Camp Nou!!!