Javascript getCurrentLocation and GMap?

Hey, you beat me to the punch with this question.

I'm using Views + Gmap + Location and rendering a map with node locations on it. I've dropped the javascript code into the footer of the view that pulls the lat/lon coords from the browser. It was originally from an iphone tutorial but seems to work on Firefox 3.5 as well.

It pulls the coords just fine and exports them below the rendered map, however I can't seem to get the two to play nice together. I want the coords be inserted as the map's center point.

You can view the test page here: www.coastalempire.com/savannah/maps

I've only been playing with this for a few hours so odds are I'll figure it out (or figure out why it isn't possible :p) pretty soon, but any collaboration would be awesome. If I come up with the answer, I'll post it here. It seems like it would be an awesome feature to include in the gmap module, or at least a separate contrib module.

Forgot to mention above: the test map has node locations in Savannah, GA. I've centered the map by default in Macon, GA. If you want to see Savannah and the node locations, just follow I-16 southeast from Macon and you'll see some default drupal markers at the coast.

Not sure if this is necessary for testing this but I figure it can't hurt.

Any improvements on this?? It would really be a nice option...

I'd love this feature as well.

We're trying to build something similar to this site, but using Drupal instead. I'll try to kludge something together, but my javascript and php are a bit iffy.

I've got this bunch of code

    myLocIcon = new google.maps.MarkerImage('Blue20x20.png');

    myMarker = new google.maps.Marker({map:map, 
                                       position:campusLatlng,
                                       visible:false, 
                                       icon:myLocIcon}
                                       );

        var ASU_campus_region = {};
        ASU_campus_region.north_lat = 33.4366343;
        ASU_campus_region.south_lat = 33.4108633;
        ASU_campus_region.west_long = -111.9430017;
        ASU_campus_region.east_long = -111.9171882;
		
/* makeMarker calls went here */		

    if (navigator.geolocation) {  
        /* geolocation is available */  
        var first_geoloc = true;
        var last_pos = null;
        var myLatlng;

        var update_position = function(position) {  

            last_pos = position;
            
                        
            if ( (position.coords.latitude <= ASU_campus_region.north_lat) &&
                 (position.coords.latitude >= ASU_campus_region.south_lat) &&
                 (position.coords.longitude <= ASU_campus_region.east_long) &&
                 (position.coords.longitude >= ASU_campus_region.west_long) ) {
                    myLatlng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
                    myMarker.setPosition(myLatlng);
                    myMarker.setVisible(true);

                    if (center_map) {
                        map.setCenter(myLatlng);
                    }

                    $("#updateButton").show();


            } else {
                myMarker.setVisible(false);
                if (first_geoloc) {
                    alert ("You are currently off campus. Centering map at ASU.");
                    myLatlng = new google.maps.LatLng(33.4203694,-111.933909);
                    map.setCenter(myLatlng);
                }
            }

            first_geoloc = false;

            return true;
        };

        $("#breadcrumbs").after("<a id=\"updateButton\" style=\"display:none\">Update</a>");

        navigator.geolocation.watchPosition(
            update_position,
            function(error){
                return true;
            },
            {
                enableHighAccuracy:true,
                maximumAge:10000
            });

        $("#updateButton").live("click", function() {
            center_map = true;
            if (last_pos != null) {
                update_position(last_pos);
            }
            center_map = false;
            return false;
        });
    } 

Which, when it's got the other "create map" stuff around it, works just great. However, I have no idea how to merge this with the gmap output. I am not a coder at all.

Is there a way to call this in a separate js file maybe and then programmatically add it to the gmap marker output?

jQuery(function($) {
  navigator.geolocation.getCurrentPosition(function (position) {
    lat = position.coords.latitude;
    lng = position.coords.longitude;
    setCoords(lat, lng);
  });
});

function setCoords (lat, lng) {
  map = Drupal.gmap.getMap('#gmap-auto1map-gmap0').map;
  map.setCenter(new google.maps.LatLng(lat, lng));
  map.setZoom(11);
};

#gmap-auto1map-gmap0 is the id of the map div. I don't quite know how this is set yet. My setCoords function doesn't work on load yet, but if you call it after load it will pan and zoom to the user's location. I'm experimenting with this as well but we'll get it soon.

This should do it for you pretty nicely I hope. Syntax is slightly weirder than I usually see in Drupal but I believe it is the correct way to do this in jQuery.

Note: This waits for 'markersready' since I'm putting markers on the map via the Views Gmap style, you may be able to change 'markersready' to just 'ready' and get some performance improvements (or it might just not work without the change, it's possible).

-Chuck

jQuery(function($) {
  $.extend({
    initialize: function () {
      var m = Drupal.gmap.getMap('auto1map');
      if (m.map && m.markersready) {
        $.setCoords();
      }
      else {
        m.bind('markersready', function(data) {
          $.setCoords();
        });
      }
    },
    setCoords: function () {
      navigator.geolocation.getCurrentPosition(function (position) {
        var gmap = Drupal.gmap.getMap('auto1map').map;
        var lat = position.coords.latitude;
        var lng = position.coords.longitude;
        gmap.setCenter(new google.maps.LatLng(lat, lng));
        gmap.setZoom(13);
      });
    }
  });
  
  $.initialize();
});

This looks fantastic. I'm also building my map using the Views Gmap style. Forgive me for being a goose though: where should this code go?

Does anyone know where this code should go? I've been trying to put it in various places in gmap.js but it doesn't appear to be working.

@dogmatix - This should go in your theme's js folder, but failing that you could drop it in a block and make sure the block is present everywhere you want the code to go. But I would try to put it in the right spot if possible. :)

Thank you so much vosechu. Adding your code to a js file in the theme worked great.

Now to try integrating the "You Are Here" marker along with auto location update.

This is fantastic!!

**Note**: You just need to remember to change the ID from 'auto1map' to the ID for your gmap :)

Did anyone get this working to have an addMarker to the current location? I can't seem to work it out!

Cheers,
Garry.

Thanks team.

#8 worked for me too.