Customize Google Map Info Windows

In the last tutorial, we re-used a few mixins to filter the Google Map that contained all of the cafes: https://serversideup.net/re-using-vuejs-mixins-filtering-google-map-data/. The filtering helped because it helped us visualize locally where a cafe was that matched our search parameters was located. However when you click on a marker, the only thing that displays is the cafe name. In this tutorial we will be Customize the Google Map Info Windows for these markers so they display a little more information and a link to the individual cafe page.

Step 1: Plan what we want

We don't want a super complex info window, we just want it styled a little bit than we did here: https://serversideup.net/custom-google-maps-info-windows/. Maybe add some more information such as the address of where the cafe is located. If we add pictures in the future we can display these in the pop up as well.

Step 2: Modify the buildMarkers() method

First, let's open up the /assets/js/components/cafes/CafeMap.vue component. This is where the buildMarkers() method is. If you examine the method we have, there's a line where we create an info window like this:

/*
  Create the info window and add it to the local
  array.
*/
let infoWindow = new google.maps.InfoWindow({
  content: this.cafes[i].name
});

In this tutorial we will be editing the content of the info window. The cool thing is you can add HTML to this field. If you look at Google Map's InfoWindow documentation (Info Windows | Google Maps JavaScript API | Google Developers) they provide a more in-depth example.

When we are building our info windows, we have access to the cafe and can grab certain attributes. So before we define our info window let's create a contentString variable:

/*
  Create the info window and add it to the local
  array.
*/
var contentString = '<div class="cafe-info-window">' + '</div>';

Right now, this contains a little container for our cafe information that will display in our pop up window.

Now let's add some html to display the data:

/*
  Create the info window and add it to the local
  array.
*/
var contentString = '<div class="cafe-info-window">' +
                      '<div class="cafe-name">'+this.cafes[i].name+'</div>' +
                      '<div class="cafe-address">' +
                        '<span class="street">'+this.cafes[i].address+'</span>' +
                        '<span class="city">'+this.cafes[i].city+'</span> <span class="state">'+this.cafes[i].state+'</span>' +
                        '<span class="zip">'+this.cafes[i].zip+'</span>' +
'<a href="/#/cafes/'+this.cafes[i].id+'">Visit</a>'+
                      '</div>'+
                    '</div>';

This will be what we insert into each info window. Now, all we have to do is adjust the content of the InfoWindow that we create to reference the contentString:

let infoWindow = new google.maps.InfoWindow({
  content: contentString
});

I also added a few styles to make the content in the info window look nice. So on top, in the <style> tag for the CafeMap.vue component, add the following code nested in the div#cafe-map-container style block.:

Make sure to include the reference to the variables so we get some of the color in there as well:

@import '~@/abstracts/_variables.scss';

Conclusion

That should do it! A simple clean up on the info windows, but adds a world of difference for the user and provides just enough information. We now can link to the individual cafe page from the info window which is super handy for users. Make sure to check out the code at:

GitHub - serversideup/roastandbrew: Helping the coffee enthusiast find their next cup of coffee. Also, helping aspiring web and mobile app developers build a single page app and converting it to a mobile hybrid. All tutorials can be found at https://serversideup.net

If you are interested in more information about API Driven App Development, we are writing a book! Sign up to receive notifications here: Server Side Up General List