Generic Google Map Example with Markers

HTML

<script src="//maps.googleapis.com/maps/api/js?v=3"></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

// Map instance
var map;

// Markers array so map can show both markers with best view.
var markers = [];

// Init map
var initMap = function() {
  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
  });
  
  // Push marker to array
  markers.push(marker);
}

// Show the users position
var showPosition = function(position) {
  var userLatLng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
  var marker = new google.maps.Marker({
    position: userLatLng,
    title: 'Your Location',
    draggable: false,
    map: map
  });
  
  // Push marker to array
  markers.push(marker);
  
  // Create bounds object, loop over markers, set best map view.
  var bounds = new google.maps.LatLngBounds();
  for (var i = 0; i < markers.length; i++) {
    bounds.extend(markers[i].getPosition());
  }
  
  // Set best map view for markers.
  map.fitBounds(bounds);
}

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

initMap();

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