To create this simple web page, one will just need two files: a web page to utilize the Google API and a JavaScript file containing coordinates that will be passed to the Google API.
- One will first need to obtain an API key to utilize Google’s APIs. To obtain a key, go to Google’s article: Setting up API Keys – https://support.google.com/googleapi/answer/6158862?hl=en
- Once you have an API Key, create an HTML page called geolocation.html.
- You will need to specify your API Key as part of the Google script:
<script src=”https://maps.googleapis.com/maps/api/js?key=<your API Key>”></script>
Below is an example of an html page utilizing the above:
<!DOCTYPE HTML>
<html>
<title>Geolocations Example</title>
<body>
<h1 style="text-align:center">Dennis V DeOcampo</h1>
<h2 style="text-align:center">Revision: 03/08/2020</h2>
<div id="canvas"
style="width: 100%; height: 600px;
border-bottom:#000 1px solid;
border-top: #000 1px solid;
border-left: #000 1px solid;
border-right: #000 1px solid;"></div>
<script src="geolocation.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=daSDFAFQWFDQW1ESAXZCSAC_notAValidKey"></script>
</body>
</html>
4. As can one can see in the above html page, a JavaScript file called geolocation.js is used. The JavaScript file allows us to ask Google for our current coordinates as well as specify locations of businesses of coordinates we want shown on the map.
//get visitor's current location
function getGeolocation() {
navigator.geolocation.getCurrentPosition(showMap);
}
//show visitor's current location on map
function showMap(geoPos) {
//locate user's location
geolocate = new google.maps.LatLng(geoPos.coords.latitude, geoPos.coords.longitude);
let mapProp = {
center: geolocate,
zoom:13,
};
//map it to div id canvas and display user's location
let map=new google.maps.Map(document.getElementById('canvas'),mapProp);
let infowindow = new google.maps.InfoWindow({
map: map,
position: geolocate,
content:
`Your Location:
<br>Latitude: ${geoPos.coords.latitude}
<br>Longitude: ${geoPos.coords.longitude}`
});
//offices to mark on map
var offices = [
['Office Location Number 1 <br> 5335 Village Market <br> Wesley Chapel, Fl 33545',28.2415238,-82.347757,'https://goo.gl/maps/HhjPnZC82EdjF35E9', 0],
['Office Location Number 2 <br> 6333 Wesley Grove Blvd <br> Wesley Chapel, Fl 33545',28.2459471,-82.3477248,'https://goo.gl/maps/L8rbSU9D4zG3ndYo8',1],
['Office Location Number 3 <br> 30056 FL-54, <br> Wesley Chapel, Fl 33545', 28.2454982,-82.3160237,'https://goo.gl/maps/DLd52YpJpWNaL7BN8', 2],
['Office Location Number 4 <br> 28500 FL-54, <br> Wesley Chapel, Fl 33545', 28.2348261,-82.3463467,'https://goo.gl/maps/1h4KUGobfdfc7Z5f9', 3],
['Office Location Number 5 <br> 31108 FL-54, <br> Wesley Chapel, Fl 33545', 28.234515,-82.298482,'https://goo.gl/maps/1h4KUGobfdfc7Z5f9', 4],
['Office Location Number 6 <br> 2245 Lelan Ln <BR>Casselberry, FL 32707',28.648061,-81.333389 ,'https://goo.gl/maps/mzdkpxWjmMpEaB27A', 5],
['Office Location Number 7 <br> 3425 Winter Lake Road <BR>Lakeland, FL 33803',27.9971698,-81.8888027,14.87 ,'https://goo.gl/maps/6qGfbt4NVsT1foKR7', 5],
]
//place marker on businesses on the locations array
var marker, i,infowindow2
for (i = 0; i < offices.length; i++) {
marker = new google.maps.Marker({
position: {lat: offices[i][1], lng: offices[i][2]},
map: map,
title: offices[i][0],
});
var info = new google.maps.InfoWindow({})
//make marker clickable to display info and add a <a href> link
google.maps.event.addListener(
marker,
'click',
(function(marker, i) {
return function() {
info.setContent(offices[i][0] + "<br><a href='" + offices[i][3] + "'> Get Directions </a>")
info.open(map, marker)
}
})(marker, i)
)
};
}
getGeolocation();
5. As you can see in the screenshot below, the visitor’s coordinates (longitude and latitude) is provided from the Google API. The coordinates in red is based on the list of offices from a JSON formatted list in the JavaScript.
