HTML5 Geolocation API

by Kyle Pennell

HTML

<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyC0bSMpvfUqzoxJf4CrpfP8qAtUTWLCP3U"></script>
<div id="map-canvas" style="width:100%; height:200px; border:1px solid #000;"></div>

JavaScript

function initialize() {

    if (navigator.geolocation) {
        
        navigator.geolocation.getCurrentPosition(function(pos) {
         console.log("got position", pos);
            var lat = pos.coords.latitude;
            var lng = pos.coords.longitude;
            
            var mapOptions = {
                center: new google.maps.LatLng(lat, lng),
                zoom: 12
            };
            
            var infowindow = new google.maps.InfoWindow();
            infowindow.setContent(lat + " " + lng);
            infowindow.setPosition(mapOptions.center);
            
            var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
            
            infowindow.open(map);
            
        }, onError);
        
        // can also monitor position as it changes
        // navigator.geolocation.watchPosition(showPosition);
        
    } else {
        
        onError();
        
    }

    
}

var onError = function() {
    console.log("Something went wrong");
}

initialize();