Brett Brett - 1 month ago 17
HTML Question

google maps api center on my location with a button

Everything is working but I would really like for the last button (GPS) (sorry can't post image)
to center the map on the user location instead of just refreshing the map like I currently have it set up to do.

An example of how this would work is for the user to have the webpage open and scroll around the map, possibly changing to satellite view, then be able to click the above button (or any button for that matter) and have the map pan back to their location. Not sure if this is even possible, but I can't seem to figure it out on my own. Any help is very much appreciated. Here is the link to my Frankenstein map. http://deepfrogphoto.com/Brett-Pelletier-Photography/Links/maps/wasatch-ski-map-mobile.htm

var map, GeoMarker;

function toggleLayer(this_layer){
if(this_layer.getMap()) {
this_layer.setMap(null)
} else {
this_layer.setMap(map);}}

function initialize() {
var mapOptions = {
zoom: 20,
center: new google.maps.LatLng(40.563855, -111.675426),
mapTypeId: google.maps.MapTypeId.TERRAIN
};

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

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);

trafficLayer = new google.maps.TrafficLayer();
trafficLayer.setMap(map);

layer1 = new google.maps.FusionTablesLayer({
map: map,
heatmap: { enabled: false },
query: {
select: "skilines",
from: "1R5pCEyNN74N8Dt9MkfNXA6A9D1HbQESzOR1fYFa7",
where: ""
},
options: {
styleId: 2,
templateId: 2
}
});

layer2 = new google.maps.FusionTablesLayer({
map: map,
heatmap: { enabled: false },
query: {
select: "resorts",
from: "19iu58FDFcBIZZ-wU1iZcf89AI5ABDJ7YTv355su5",
where: ""
},
options: {
styleId: 2,
templateId: 2
}
});

layer3 = new google.maps.FusionTablesLayer({
map: map,
heatmap: { enabled: false },
query: {
select: "summerhiking",
from: "1t1XNnG7J7Zu1p5mIUpm6qIGVYwzhkCgPy_je0IKr",
where: ""
},
options: {
styleId: 2,
templateId: 2
}
});

layer4 = new google.maps.KmlLayer('URL-to-KML.kml',
{
suppressInfoWindows: false,
map: map,
preserveViewport: true
});
}

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

if(!navigator.geolocation) {
alert('Your browser does not support geolocation');}

//]]>
</script>

<title>Wasatch Map by deepfrogphoto</title>
</head>

<body>
<b>Wasatch Map by deepfrogphoto -</b>

<form>

<button onclick="myFunction()">Center Map on My Location</button>

</form>

<div id="map_canvas"></div>
</body>

Answer

add a button with onclick event listener

<button onclick="myFunction()">Center</button>

then create the myFunction to center the map to user position

function myFunction(){
      Map.panTo(UserCords);//UserCords = user current latitude, longitude. I suppose you have them!!!
}

EDIT

function myFunction(){
     if (navigator.geolocation){
         navigator.geolocation.getCurrentPosition(getPosition,showError);
     }
     else{
          alert("Geolocation is not supported by this browser.");
     }
 }

function getPosition(position)
  { 
      UserLatitude = position.coords.latitude;
      UserLongitude = position.coords.longitude;
      showPosition(UserLatitude, UserLongitude);
  }

function showPosition(userLatitude, userLongitude){
        lat= userLatitude;
        lon= userLongitude;
        latlon=new google.maps.LatLng(lat, lon);
        YourMap.panTo(latlon);
}

function showError(error)
  {
  switch(error.code) 
    {
    case error.PERMISSION_DENIED:
      alert("User denied the request for Geolocation.");
      break;
    case error.POSITION_UNAVAILABLE:
      alert("Location information is unavailable.")
      break;
    case error.TIMEOUT:
      alert("The request to get user location timed out.")
      break;
    case error.UNKNOWN_ERROR:
      alert("An unknown error occurred.")
      break;
    }
  }
Comments