Geolocation with V3 map

512 views
Skip to first unread message

Chandra Miller

unread,
May 7, 2013, 3:06:42 PM5/7/13
to Google Maps JavaScript API v3
Hello. I would like to add geolocation to my 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 -

map = new google.maps.Map($('#map_canvas')[0],myOptions);. My map
loads through jquery and doesn’t use

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

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.
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?

Chandra Miller

unread,
May 7, 2013, 3:52:29 PM5/7/13
to google-map...@googlegroups.com
CSS for the map (#map_canvas) is at 'alert.fcd.maricopa.gov/alert/Google/v3/css/mobile.css';. You can view page source of mobile.html through browser.
Message has been deleted
Message has been deleted

Chandra Miller

unread,
May 22, 2013, 2:59:53 PM5/22/13
to google-map...@googlegroups.com
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.
Reply all
Reply to author
Forward
0 new messages