<script src=\u201dhttps:\/\/maps.googleapis.com\/maps\/api\/js?key=<your API Key>\u201d><\/script>
Below is an example of an html page utilizing the above:<\/li>\n<\/ol>\n\n\n\n
<\/p>\n\n\n\n
<!DOCTYPE HTML>\n<html>\n<title>Geolocations Example<\/title>\n<body>\n <h1 style=\"text-align:center\">Dennis V DeOcampo<\/h1>\n <h2 style=\"text-align:center\">Revision: 03\/08\/2020<\/h2>\n<div id=\"canvas\" \n style=\"width: 100%; height: 600px; \n border-bottom:#000 1px solid;\n border-top: #000 1px solid;\n border-left: #000 1px solid;\n border-right: #000 1px solid;\"><\/div>\n\n <script src=\"geolocation.js\"><\/script>\n\n<script src=\"https:\/\/maps.googleapis.com\/maps\/api\/js?key=daSDFAFQWFDQW1ESAXZCSAC_notAValidKey\"><\/script>\n<\/body>\n<\/html>\n\n\n<\/code><\/pre>\n\n\n\n4. As can one can see in the above html page, a JavaScript file called geolocation.js <\/em>i<\/strong>s 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.<\/p>\n\n\n\n\n\/\/get visitor's current location\nfunction getGeolocation() {\n navigator.geolocation.getCurrentPosition(showMap);\n }\n \n \/\/show visitor's current location on map\n function showMap(geoPos) {\n \/\/locate user's location\n geolocate = new google.maps.LatLng(geoPos.coords.latitude, geoPos.coords.longitude);\n let mapProp = {\n center: geolocate,\n zoom:13,\n };\n \/\/map it to div id canvas and display user's location\n let map=new google.maps.Map(document.getElementById('canvas'),mapProp);\n let infowindow = new google.maps.InfoWindow({\n map: map,\n position: geolocate,\n content:\n `Your Location:\n <br>Latitude: ${geoPos.coords.latitude}\n <br>Longitude: ${geoPos.coords.longitude}`\n });\n \n \/\/offices to mark on map\n var offices = [\n ['Office Location Number 1 <br> 5335 Village Market <br> Wesley Chapel, Fl 33545',28.2415238,-82.347757,'https:\/\/goo.gl\/maps\/HhjPnZC82EdjF35E9', 0],\n ['Office Location Number 2 <br> 6333 Wesley Grove Blvd <br> Wesley Chapel, Fl 33545',28.2459471,-82.3477248,'https:\/\/goo.gl\/maps\/L8rbSU9D4zG3ndYo8',1],\n ['Office Location Number 3 <br> 30056 FL-54, <br> Wesley Chapel, Fl 33545', 28.2454982,-82.3160237,'https:\/\/goo.gl\/maps\/DLd52YpJpWNaL7BN8', 2],\n ['Office Location Number 4 <br> 28500 FL-54, <br> Wesley Chapel, Fl 33545', 28.2348261,-82.3463467,'https:\/\/goo.gl\/maps\/1h4KUGobfdfc7Z5f9', 3],\n ['Office Location Number 5 <br> 31108 FL-54, <br> Wesley Chapel, Fl 33545', 28.234515,-82.298482,'https:\/\/goo.gl\/maps\/1h4KUGobfdfc7Z5f9', 4],\n ['Office Location Number 6 <br> 2245 Lelan Ln <BR>Casselberry, FL 32707',28.648061,-81.333389 ,'https:\/\/goo.gl\/maps\/mzdkpxWjmMpEaB27A', 5],\n ['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],\n \n ]\n \n \/\/place marker on businesses on the locations array\n var marker, i,infowindow2\n\n for (i = 0; i < offices.length; i++) {\n \n marker = new google.maps.Marker({\n position: {lat: offices[i][1], lng: offices[i][2]},\n map: map,\n title: offices[i][0],\n });\n\n var info = new google.maps.InfoWindow({})\n \n \/\/make marker clickable to display info and add a <a href> link\n google.maps.event.addListener(\n marker,\n 'click',\n (function(marker, i) {\n return function() {\n info.setContent(offices[i][0] + \"<br><a href='\" + offices[i][3] + \"'> Get Directions <\/a>\")\n info.open(map, marker)\n }\n })(marker, i)\n )\n\n \n \n };\n\n \n \n }\n \n \n getGeolocation();\n \n<\/code><\/pre>\n\n\n\n5. As you can see in the screenshot below, the visitor\u2019s 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.
<\/p>\n\n\n\n![\"\"](\"https:\/\/i0.wp.com\/ouritsource.com\/blog\/wp-content\/uploads\/2025\/05\/screenshot-geolocation.png?resize=640%2C179&ssl=1\")
<\/figure>\n<\/body>","protected":false},"excerpt":{"rendered":"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…<\/p>\n","protected":false},"author":1,"featured_media":562,"comment_status":"closed","ping_status":"","sticky":false,"template":"","format":"standard","meta":{"om_disable_all_campaigns":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[5],"tags":[],"class_list":["post-560","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-java-script","has-thumbnail"],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/ouritsource.com\/blog\/wp-content\/uploads\/2025\/05\/GeolocationImage.png?fit=1536%2C1024&ssl=1","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/ouritsource.com\/blog\/wp-json\/wp\/v2\/posts\/560","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ouritsource.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ouritsource.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ouritsource.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/ouritsource.com\/blog\/wp-json\/wp\/v2\/comments?post=560"}],"version-history":[{"count":5,"href":"https:\/\/ouritsource.com\/blog\/wp-json\/wp\/v2\/posts\/560\/revisions"}],"predecessor-version":[{"id":567,"href":"https:\/\/ouritsource.com\/blog\/wp-json\/wp\/v2\/posts\/560\/revisions\/567"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/ouritsource.com\/blog\/wp-json\/wp\/v2\/media\/562"}],"wp:attachment":[{"href":"https:\/\/ouritsource.com\/blog\/wp-json\/wp\/v2\/media?parent=560"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ouritsource.com\/blog\/wp-json\/wp\/v2\/categories?post=560"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ouritsource.com\/blog\/wp-json\/wp\/v2\/tags?post=560"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}