CODEWITHSUNDEEP
javascriptgoogle-mapsgoogle-maps-api-3google-fusion-tables
Simon Cooper
Simon Cooper

Reputation: 1594

Google Map asks for location ok, but doesn't centre map

I am loading my map fine along with markers pulled from a FusionTable. I'm now trying to centre the map around the users location if they accept the request.

On loading the page, the browser asks to access my location, and I agree, but the map doesn't centre on my location. I also have a search for address feature, but don't think that would be affecting things.

My code:

function initMap() {

    var coords = new google.maps.MVCObject();
    coords.set('latlng', new google.maps.LatLng(51.525, -0.1));

    if (navigator.geolocation) {
     navigator.geolocation.getCurrentPosition(success);
    }

    //set new value for coords
    function success(position) {
     coords.set('latlng',
         new google.maps.LatLng(position.coords.latitude,
             position.coords.longitude));
           }

    var defaultZoom = 13;
    var tableId = '#############';
    var locationColumn = 'Location';
    var geocoder = new google.maps.Geocoder();
    var styles = [
    ...
];

    var map = new google.maps.Map(document.getElementById('map'), {
      center: coords.get('latlng'),
      zoom: defaultZoom,
      styles: styles
    });


    var layer = new google.maps.FusionTablesLayer({
      query: {
        select: locationColumn,
        from: tableId
      },
      options: {
        styleId: 2,
        templateId: 2
      },
      map: map
    });

    var zoomToAddress = function() {
      var address = document.getElementById('address').value;
      geocoder.geocode({
        address: address
      }, function(results, status) {
        if (status == google.maps.GeocoderStatus.OK) {
          map.setCenter(results[0].geometry.location);
          map.setZoom(16);

          // OPTIONAL: run spatial query to find results within bounds.
          var sw = map.getBounds().getSouthWest();
          var ne = map.getBounds().getNorthEast();
          var where = 'ST_INTERSECTS(' + locationColumn +
              ', RECTANGLE(LATLNG' + sw + ', LATLNG' + ne + '))';
          layer.setOptions({
            query: {
              select: locationColumn,
              from: tableId,
              where: where
            }
          });
        } else {
          window.alert('Address could not be geocoded: ' + status);
        }
      });
    };

    google.maps.event.addDomListener(document.getElementById('search'),
        'click', zoomToAddress);
    google.maps.event.addDomListener(window, 'keypress', function(e) {
      if (e.keyCode == 13) {
        zoomToAddress();
      }
    });
    google.maps.event.addDomListener(document.getElementById('reset'),
        'click', function() {
          map.setCenter(defaultCenter);
          map.setZoom(defaultZoom);
          layer.setOptions({
            query: {
              select: locationColumn,
              from: tableId
            }
          });
        });
  }

  google.maps.event.addDomListener(window, 'load', initialize);

Upvotes: 1

Views: 96

Answers (1)

user7138697
user7138697

Reputation:

You need to change:

if (navigator.geolocation) {        
    navigator.geolocation.getCurrentPosition(success);
}

//set new value for coords
function success(position) {
    coords.set('latlng', new google.maps.LatLng(position.coords.latitude,
    position.coords.longitude));
}

To:

if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(function(position) {
      coords = {
        lat: position.coords.latitude,
        lng: position.coords.longitude
      };
      map.setCenter(coords);
    });
  } else {
    // Browser doesn't support Geolocation   
    //since you set coords above this section it will default to that      
  }

Working JS (I removed your fusiontableID - add that back in to view)

https://jsfiddle.net/cmjcs5eL/6/

Upvotes: 1

Related Questions