Geolocation with Google Map V3

Question

I would like to add geolocation to the mobile version of my map located at http://alert.fcd.maricopa.gov/alert/Google/v3/mobile.html .

My map loads through this JavaScript file http://alert.fcd.maricopa.gov/alert/Google/v3/js/mobilemap_v3.js . You will notice that line 46 of this file is -

map = new google.maps.Map($('#map_canvas')[0],myOptions);  

I have tried the Geolocation example at https://developers.google.com/maps/documentation/javascript/examples/map-geolocation and the W3 HTML5 Geolocation method at http://www.w3schools.com/html/html5_geolocation.asp . But my map loads through jquery and doesn't use

map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions); 

like all the examples.

I can get the geolocation to work if I replace the $ in line 46 with document.getElementById but then none of my sensors/makers will display.

Does anyone know how I could get the geolocation working with my markers/data still loading?

Answer 1

Found an answer to this! I used geolocationmarker-compiled.js (at http://code.google.com/p/google-maps-utility-library-v3/source/browse/trunk/geolocationmarker/src/geolocationmarker-compiled.js?r=379 ) and then added

var GeoMarker;

GeoMarker = new GeolocationMarker();
    GeoMarker.setCircleOptions({
    fillColor: '#808080'});

    google.maps.event.addListenerOnce(GeoMarker, 'position_changed', function() {
      map.setCenter(this.getPosition());
      map.fitBounds(this.getBounds());
    });

    google.maps.event.addListener(GeoMarker, 'geolocation_error', function(e) {
      alert('There was an error obtaining your position. Message: ' + e.message);
    });

    GeoMarker.setMap(map);

and it works great. Mobile map with Geolocation working is located at http://alert.fcd.maricopa.gov/alert/Google/v3/mobile.html and the geolocation code in in the mobilemap_v3.js file if anyone is looking to do the same thing.