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.
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!'
});
}
You can read more about Markers in Google Maps here.
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.
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
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.
Conclusion
For more reading, the documentation for Google Maps in JavaScript 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.
Top comments (0)