Home

How to Combine Geolocation with Google Maps when Coding with JavaScript

|
|  Updated:  
2016-03-26 7:38:47
JavaScript Essentials For Dummies
Explore Book
Buy On Amazon

One of the most common things that JavaScript programmers need to do with geolocation data is to display a location on a map. In order to do this, you first need to get the latitude and longitude. You’ve got that now. But, how do you draw the map and figure out where on the map that latitude and longitude are? That, it seems, is the daunting task.

Fortunately, there are people who have done this before and who have created an API for interacting with their mapping software. Most famously, Google makes their mapping software available for free to anyone through the Google Maps API (even for commercial purposes, in most cases).

To use the Google Maps API, follow these steps:

  1. Go to the Google APIs console at http://code.google.com/apis/console and log in with your Google Account.

  2. After you log in, you may be asked to agree to the terms of use; if so, click Accept.

  3. Click the button labeled Enable an API.

    Your screen now displays a list of APIs and a Browse APIs search box.

  4. In the Browse APIs search box, type Google Maps JavaScript API v3.

    The link for this API appears.

  5. Click the button that says OFF under the status heading.

    This step turns the API ON.

    After you activate the Google Maps JavaScript API, a green ON appears next to the API.

    Activating the Google Maps API.
    Activating the Google Maps API.
  6. Click the Credentials link on the left navigation bar.

    You see the API Access Screen.

  7. Click the link labeled Create New Key.

    The Create a New Key dialog box appears.

  8. Click Browser key in the Create New Key dialog box.

    A dialog box containing a text input field labeled Accept requests from these HTTP Referrers opens.

  9. Leave the input box labeled Accept requests from these HTTP referrers blank and click Create.

    The dialog box closes, and your API key will be created.

    In the Public API access section, you now find a long string of letters and numbers inside a box labeled Key for browser applications. This is your API key.

The API key is all you need to gain access to all the great functionality of the Google Maps API.

Now that you have access to the Google Maps JavaScript API, it’s time to try it out. The web page in this example gets the location of your computer using the navigator.geolocation object and then passes it to Google Maps to get a map.

<!DOCTYPE html>
<html>
<head>
 <title>Mapping your location</title>
 <style type=“text/css”>
 html, body, #map-canvas { height: 100%; margin: 0; padding: 0;}
 </style>
 <script type=“text/javascript”
  src=“https://maps.googleapis.com/maps/api/js?key=YO<br/>UR_API_KEY”>
 </script>
 <script>
 // run the initialize function after the map loads
 google.maps.event.addDomListener(window, ‘load’, initialize);
 function initialize() {
 // get the Position object and send it to a callback function
 var gps = navigator.geolocation.getCurrentPosition(
 // the callback function
 function (position) {
  //set Google Map options, using latitude and longitude from position object
  var mapOptions = {
  center: { lat: position.coords.latitude, lng: position.coords.longitude},
  zoom: 8
  };
  // make the map and load it into the map-canvas div in the <body>
  var map = new google.maps.Map(document.getElementById(‘map-canvas’),
    mapOptions);
 }
 );
};
</script>
</head>
<body>
 <div id=“map-canvas”</div>
</body>
</html>

In order for this script to run correctly, you have to replace the text YOUR_API_KEY with the API key that you obtained from Google.

Check out the results of running this code in a browser.

Finding yourself.
Finding yourself.

About This Article

This article is from the book: 

About the book author:

Chris Minnick is an accomplished author, teacher, and programmer. Minnick authored or co-authored over 20 books, including titles in the For Dummies series. He has developed video courses for top online training platforms and he teaches programming and machine learning to professional developers at some of the largest global companies.

Eva Holland is an experienced web developer, tech trainer, and coauthor of Coding with JavaScript For Dummies. She is a co-founder of WatzThis?, a company focused on training and course development.