An Introduction to Google Maps in JavaScript
Tags: googlemaps, googlemapsreact, react, javascript
Published: 2020-08-22 01:19:30

## Introduction 
Google Maps is a powerful tool you can easily add to your JavaScript skillset. Here, we will display Markers on a Google Map centered over New Orleans. Then, we will ask the user for their location, and if the user provides it, re-centers the map over their location. Finally, we will display multiple markers near each other as a cluster. When clicked, the map zooms into the area where those three markers are located.

## Creating Markers on a Google Map
Thankfully, Google has made displaying a Marker in Google Maps quite simple. In a map initialization function, declare an object with the coordinates of the Marker you desire.

Create a new constant called `map`, instantiate a new Google Maps map with a specified `zoom` parameter (an integer between 5 and 15), and a `center` key supplied with the coordinates object you created above. 

Then create a third constant called `marker` with a `position` key again supplied with the coordinates object you created above, a `map` key with the map created above, (`map: map` can be shortened to `map` now with ES6 syntax), and a `title` key with a string with a Marker title of your choosing.

```jsx
function initMap() {
  const coordinates = {lat: 30.0326996, lng: -90.1627533};

  const map = new google.maps.Map(document.getElementById('map'), {
    zoom: 8,
    center: coordinates
  });

  const marker = new google.maps.Marker({
    position: coordinates,
    map,
    title: 'Welcome to New Orleans!'
  });
}
```
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/69gr6olpge8xr7vse889.png)

You can read more about Markers in Google Maps [here](https://developers.google.com/maps/documentation/javascript/markers).

## Geolocation
Asking for a user's location is quite simple as well. Here we use the `navigator.geolocation.getCurrentPosition` function and destructure out `latitude` and `longtiude` from `position.coords`. We then set the `userLocation` state of the React Functional Component, so that the map will move to the userLocation.
```jsx
   navigator.geolocation.getCurrentPosition((position) => {
      const { latitude, longitude } = position.coords;
      setUserLocation({ lat: latitude, lng: longitude });
    });
```

## Marker Clustering
Sometimes, when there are a lot of Markers in a single area and the user is zoomed out, Markers can start to get pretty cluttered depending on the data type you're representing. 

First, after initializing the map with `new google.maps.Map`, set the `zoom` and `center` as we did above. Create a constant for the `labels`, and a constant for the `markers`. Map the locations, returning `new google.maps.Marker` which takes an object as a parameter with key `position`, supply it `location`, and a key `label`, supply it `labels[i % labels.length]`.

Then, create a constant called `markerCluster` and initialize the Marker Clusterer with `new MarkerClusterer` with parameters `map`, `marker`, and an object with the `imagePath`. Below that, declare 

```jsx
      const locations = [
        {lat: 30.0326996, lng: -90.1627533},
        {lat: 30.0426996, lng: -90.2627533},
        {lat: 30.0526996, lng: -90.3627533},
      ]

      function initMap() {
        const map = new google.maps.Map(document.getElementById('map'), {
          zoom: 8,
          center: {lat: 30.0326996, lng: -90.1627533}
        });

        const labels = '123456789';

        const markers = locations.map(function(location, i) {
          return new google.maps.Marker({
            position: location,
            label: labels[i % labels.length]
          });
        });

        const markerCluster = new MarkerClusterer(map, markers,
            {imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'});
      }
```
Read more here about Marker Clustering [here](https://developers.google.com/maps/documentation/javascript/marker-clustering?hl=en).

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/tq0anl4vrdn0qluiby85.png)

## Conclusion
For more reading, the [documentation for Google Maps in JavaScript](https://developers.google.com/maps/documentation/javascript/reference) is quite comprehensive. We went through creating Markers, using Geolocation, and performing Marker Clustering. Google Maps can be a robust asset to incorporate into your project.