Question

var myloc;
function initialize() {

  if (navigator.geolocation) navigator.geolocation.getCurrentPosition(function(pos) {
    var me = new google.maps.LatLng(pos.coords.latitude, pos.coords.longitude);
    myloc.setPosition(me);
    myloc.setMap(map);
  }, function(error) {
      // ...
  });

  var mapOptions = {
    zoom: 14,
    center: me,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };

  var mylocOptions = {
    title: "You are here..."
  };

  var map = new google.maps.Map(document.getElementById("map_canvas"), 
      mapOptions);

  myloc = new google.maps.Marker(mylocOptions);
}

I checked out another question and feel like I got somewhere with this. When I open the app (the first time) it asks me for permission to use my location. I think I simplified the myloc options, I’m fine with the default look and everything of the marker for testing. Upon allowing it, nothing happens, though. me is undefined. Maybe I’m doing something in the wrong order?

Without the location, I am able to get the map up with other markers, so… it’s gotta be an order thing? I’ve tried a few variations…

I’d like to eventually plop a marker onto the map after the browser gives up the general coordinates. Eventually that will be movable and updated in the db, but I’m not worried about that just yet, obviously. Baby steps…

Answer 1

Don’t set your marker’s position to me when you first initialize it. Because me is available after the user allows the browser to use their location. Do it when you get their location.

var mylocOptions = {
  title: "You are here..."
};

if (navigator.geolocation) navigator.geolocation.getCurrentPosition(function(pos) {
  var me = new google.maps.LatLng(pos.coords.latitude, pos.coords.longitude);
  myloc.setPosition(me);
  myloc.setMap(map);
  map.setCenter(me);
}, function(error) {
  // ...
});

also remove

center: me

where you define map.