Implementing the Geolocation API with Google Maps API

README.md

Once you've called the GoogleMap function, you can set ID, height, and width of the map (mapcanvas.id, mapcanvas.style.height and mapcanvas.style.width). You can set map default functionality like zoom, position, and control under var myOptions:

var myOptions = {
  zoom: 15,
  center: latlng,
  mapTypeControl: false,
  navigationControlOptions: {style: google.maps.NavigationControlStyle.SMALL},
  mapTypeId: google.maps.MapTypeId.ROADMAP
};

geolocation.js

// create Google map
function GoogleMap(position) {
  'use strict';
  var location = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
  
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 20,
    disableDefaultUI: true,
    mapTypeId: google.maps.MapTypeId.ROADMAP
    //mapTypeId: google.maps.MapTypeId.SATELLITE
    //mapTypeId: google.maps.MapTypeId.HYBRID
    //mapTypeId: google.maps.MapTypeId.TERRAIN
  });

  var marker = new google.maps.Marker({
    map: map,
    position: location,
    animation: google.maps.Animation.DROP,
    title: "This is your location"
  });

  map.setCenter(location);
}
// show error if location can't be found
function showError() {
  'use strict';
  alert("Location can't be found");
}
//execute geolocation
if (navigator.geolocation) {
  navigator.geolocation.getCurrentPosition(GoogleMap, showError);
} else {
  alert("Your browser does not support Geolocation.");
}