HTML5 Geolocation WebMatrix Helper

gistfile1.js

@helper ShowPosition(string outputElementId, string triggerElementId)
{
<script src="http://ajax.microsoft.com/ajax/jquery/jquery-1.5.1.min.js" type="text/javascript"></script>
<script type="text/javascript">

    $(document).ready( function() {
        $("#@triggerElementId").click(function() {
            if (navigator.geolocation) 
            {  
                navigator.geolocation.watchPosition(
                    function(position) 
                    {    
                        var lat =  position.coords.latitude;
                        var lon =  position.coords.longitude;
                        
                        $("#@outputElementId").html("latitude = " + lat + ", longitude = " + lon);
                    });
            }
        });
    });            
</script>                
}

@helper MapPosition(string outputElementId, string triggerElementId, string credentials, int zoomLevel = 18, int width = 800, int height = 600)
{
<script src="http://ajax.microsoft.com/ajax/jquery/jquery-1.5.1.min.js" type="text/javascript"></script>
<script charset="UTF-8" type="text/javascript" src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0"></script>
<script type="text/javascript">

    $(document).ready( function() {
        $("#@triggerElementId").click(function() {
            if (navigator.geolocation) 
            {  
                navigator.geolocation.watchPosition(
                    function(position) 
                    {    
                        var lat =  position.coords.latitude;
                        var lon =  position.coords.longitude;
                        
                        var pin = new Microsoft.Maps.Pushpin({
                                latitude: lat,
                                longitude: lon
                            });
                        
                        var mapOptions = { 
                            credentials: "@credentials",
                            mapTypeId: Microsoft.Maps.MapTypeId.aerial,
                            height: @height,
                            width: @width
                        };

                        var map = new Microsoft.Maps.Map(document.getElementById('@outputElementId'), mapOptions);
                        var viewOptions = {
                            center: {
                                latitude: lat,
                                longitude: lon
                            },
                            zoom: @zoomLevel,
                            mapTypeId: "auto"
                        }
                        
                        map.setView(viewOptions);
                        map.entities.push(pin);
                });
            }
        });
    });            
</script>                
}