Philadelphia Reflections: Find your location

Find your location

Click the button at the top of your browser to allow it to share your location.

Here's the key Javascript/HTML code (thanks to https://maxheapsize.com):

<head>

<script type="text/javascript">
// <![CDATA[

var map;
var geocoder;

function initialize() {
   map = new GMap2(document.getElementById("map_canvas"));
   map.setCenter(new GLatLng(34, 0), 1);
   geocoder = new GClientGeocoder();
   }

if (navigator.geolocation) {
  
   navigator.geolocation.getCurrentPosition(function(position) {  
	var address = position.coords.latitude+","+position.coords.longitude;
	geocoder.getLocations(address, addAddressToMap);
 }); 
  
} else {
  alert(" I'm sorry, but geolocation services are not supported by your browser.");
}  

function addAddressToMap(response) {
      map.clearOverlays();
      if (!response || response.Status.code != 200) {
        alert("Sorry, we were unable to geocode that address");
      } else {
        place = response.Placemark[0];
        point = new GLatLng(place.Point.coordinates[1],
                            place.Point.coordinates[0]);
        marker = new GMarker(point);
        map.setCenter(point, 13);
        map.addOverlay(marker);
		var addr = document.getElementById('address');
		addr.firstChild.data = place.address;
      }
    }

// ]]>
</script>

</head>

<body onload="initialize()">

<div id="map_canvas" style="width: 500px; height: 300px"></div>

Originally published: Monday, June 07, 2010; most-recently modified: Friday, May 17, 2019