Generic Google Map Example with Markers

by iamjpg

HTML

<script src="https://maps.googleapis.com/maps/api/js?v=3&amp;amp;sensor=false"></script>
<div id="map" style="height: 400px;"></div>

CSS

body {
  margin: 0;
  padding: 0;
  font: 12px sans-serif;
}

h1,
p {
  margin: 0;
  padding: 0;
}

JavaScript

function initMap() {
  var chestersLoc = {
      lat: 52.19147365,
      lng: -2.21880075
    },
    map = new google.maps.Map(document.getElementById('map'), {
      zoom: 16,
      center: chestersLoc
    });
  var marker = new google.maps.Marker({
    position: chestersLoc,
    map: map
  });
}

var showPosition = function(position) {
	console.log(position)
  console.log(navigator)
  var userLatLng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude),
    marker = new google.maps.Marker({
      position: userLatLng,
      title: 'Your Location',
      draggable: true,
      map: map
    });
}

function errorHandler(error) {
   console.log('Geolocation error : code '+ error.code +' - '+ error.message); 
}

initMap();
navigator.geolocation.getCurrentPosition(showPosition, errorHandler, {
  enableHighAccuracy: false,
  maximumAge: 60000,
  timeout: 27000
});