Finding Your Place With the Google Maps API

Over the past couple weeks, our dev team set out to build an app for creating and browsing potlucks in the user’s area. Before we began, I was a bit nervous about implementing a Google Map in our project. I feared that it would be dense, I feared that it would need perfectly formatted addresses, I feared that I would need to use a secondary library to calculate coordinates. Turns out, my fears were unfounded. The Google Maps API is pretty user-friendly, and I wanted to share some of the features I discovered while using the API.

Setting up Google Maps in a Javascript project just takes a couple steps. Firstly, insert the appropriate script to load the Maps Javascript API:

<script async defer
src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
</script>

Once this script is loaded, we then have access to the methods necessary to interact with Maps. Most of these methods we used were defined on the Javascript class that represents a map, appropriately called Map. When creating a new map instance, simply specify which <div> in the DOM will contain your map. There are also several options available to customize the instance, the required options being center (the center of the map, determined by lat and lng, latitude and longitude respectively) and zoom (the lower the zoom number, the wider the map).

<div id="map"></div>
<script>
const map = new google.maps.Map(document.getElementById("map"), {
center: {lat: 29.950, lng: -90.100},
zoom: 6
})
</script>

Now, we can reference this instance to place markers on it, or visualize data, etc. Each marker or piece of data will need to be formatted in the same way we just did for the center property above, in an object with lat and lng properties corresponding to coordinates. So how do we figure out those coordinates?

To do this, we can use the Geocoder class made available to us. We instantiate it similarly to the Map object above, and we pass to it an address, (the string of the location we want to find coordinates for):

const geocoder = new google.maps.Geocoder;
geocodeObj.geocode({
address: '1 Palm Drive, New Orleans, LA'
}, (response) => {
const latitude = response[0].geometry.location.lat();
const longitude = response[0].geometry.location.lng();
})

The response is going to be an array containing the location the geocoder found for our query. This response contains the coordinates of the address we passed in, contained in the geometry.location object. The response also contains detailed address components in an array of objects (address_components). If an incomplete address was given, the geocoder will make its best guess (pretty accurate for most of our tests) and respond with a full address with city, state, and zip components.

So say we want to make a marker on our map with this information. All we have to do is instantiate a new Marker, passing in the position (in coordinates) where it should be placed, and the name of the map we want to place it on:

const marker = new google.maps.Marker({
position: {lat: 29.950, lng: -90.100},
map: map,
title: "Your new marker!"
});

And that’s it! That’s all it takes to get a map up and running in your Javascript project. The Google Maps API can add some cool features to your project, and the fact that Google makes it relatively easy to use means we can spend less time figuring out how to use it, and more time figuring out creative ways to use the tools.

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.