A wedding website: location information and Google Maps

Photo by Sylwia Bartyzel on Unsplash

The second section of my wedding website is aimed at displaying all the information related to the wedding location: where the ceremony will take place, how to get there and some suggestions on where to stay.

It’s a static component, since all the necessary information are hard coded. The main layout includes some pictures of the area, a description of the location and how to get there. To improve my React skills, which is the main reason I am working on this project, I decided to incorporate Google Maps in this section. This has the aim of visually displaying the main locations of the wedding on an interactive map.

Implementing this feature can be done in different ways:

1. simply adding a screenshot or an embedded Google Map
2. using a package that provides a pre-developed React component to display the map
3. working with the Google Maps API to code my own Map component.

An embedded map was not delivering the type of interactivity that I wanted for my users, and the React component wasn’t giving me too much flexibility with regards to the styling. As a matter of fact, the pre-made component comes already wrapped in a div with absolute positioning and I could not find any way to style this outer div (if you have ever used google-react-maps and you know how to make changes to the wrapper, give me a shout).

With the help of the Google Maps API documentation and the video tutorial by Yahya Elharony, I was able to create my own Map component with a series of markers with their own Information window. The locations are stored in the state of the component as in the future I might want to allow the users to add their own locations to the map.

The Maps API documentation is super clear, however it’s written for JavaScript and not React. The most challenging part was understanding how to load the Maps JavaScript API in a React application. On a simple JavaScript application, we would add the script tag and its content just before the closing body tag in the HTML file, however how does this work in a React project? The solution is to create a function that generates the script to load the Maps API, and then call it from within our Map component.

This is the script tag provided on the Maps JavaScript tutorial:

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

In our Map.js file, outside of the component but before the export default declaration, we create a function called loadScript that takes the url as the only parameter. The first line of this function will save the first script tag of our document to a variable called index. The lines 3–6 will create the script outlined by the Maps JavaScript API, while the last line will insert our script before the index script within its parent node. This will keep our script at the very beginning of our list of scripts.

function loadScript(url) {
 var index = window.document.getElementsByTagName(“script”)[0];
 var script = window.document.createElement(“script”);
 script.src = url;
 script.async = true;
 script.defer = true;
 index.parentNode.insertBefore(script, index);
}

We then call this function from within our component, and we pass the url, completed with our API key, as a parameter. This is the complete code for the simple Map component, where I also created the const style to control the styling of the map (later on I decided to move the styling to a separate Map.css file as I also wanted to style the infowindows).

The simple map, without any markers or info windows

Now let’s add the markers with their own info window. As already mentioned, the locations are hard coded for the moment and they are stored in an array named mapLocation in the state of the Map component.

Within the initMap() function, we will loop through the locations in the state and create a marker for each one of these with the google.maps.Marker constructor.

this.state.mapLocations.map(location => {
const marker = new window.google.maps.Marker({
        position: { 
            lat: location.position.lat, 
            lng:   location.position.lng 
        },
        map: map,
        title: location.title
      });
    });

The next step is to create an Infowindow for each one of the locations, which will display a series of information. We can define what content is going to be shown within a contentString variable we will create inside the loop. For example, in my case, I have included the name of the location, a short description and an image. I have then styled the infowindow in the Map.css file. The infowindow will not appear unless we link it to the marker through a click event: only when the marker is clicked, the infowindow will be opened.

this.state.mapLocations.map(location => {
  const infowindow = new window.google.maps.InfoWindow(
     content: contentString);
  const contentString = `<div class="container">
      <h2>${location.name}</h2>
      <p>${location.description}</p>
      <img src="${location.image}" /></div>`;
  const marker = new window.google.maps.Marker({
        position: { 
            lat: location.position.lat, 
            lng:   location.position.lng 
        },
        map: map,
        title: location.title
      });
  marker.addListener("click", function() {
        infowindow.open(map, marker);
      });
    });

This code presents a little problem though: all infowindows will remain open unless we click on the cross on the top right of the popup window to close each one of them. To resolve this, we can move the const infowindow outside of the loop, after removing its content, and then we can add the following function within the event listener function we declared at the bottom of our loop:

marker.addListener("click", function() {
    infowindow.setContent(contentString);
    infowindow.open(map, marker);
      });
    });

Final code for the Map component here, including the markers and info windows:

The final code for my component

This is what the page looks like at the moment. The next step will be to work on the RSVP form and integrating this with Firebase.

Resources used for this section of the website:

Google Maps API tutorial — Super helpful documentation of the Google Maps API. I will use this page again for changing the icons on the map.

Youtube tutorial by Yahya Elharony — The implementation of the Google Maps API is explained very clearly in this video tutorial (5 parts).