Customize Google Map Info Windows

Part 31 of 48 in API Driven Development With Laravel and VueJS
Dan Pastori avatar
Dan Pastori December 14th, 2017
⚡️ Updated content is available We learned a lot since we originally wrote this article. We now have this updated for Laravel 8, Vue/NuxtJS, and Capacitor.

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 '[email protected]/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

Keep Reading
View the course View the Course API Driven Development With Laravel and VueJS
Up Next → Google Analytics with Vue Router in an SPA

Support future content

The Ultimate Guide to Building APIs and Single-Page Applications with Laravel + VueJS + Capacitor book cover.

Psst... any earnings that we make off of our book is being reinvested to bringing you more content. If you like what you read, consider getting our book or you can buy us a beer.

Written By Dan

Dan Pastori avatar Dan Pastori

Builder, creator, and maker. Dan Pastori is a Laravel certified developer with over 10 years experience in full stack development. When you aren't finding Dan exploring new techniques in programming, catch him at the beach or hiking in the National Parks.

Like this? Subscribe

We’re privacy advocates. We will never spam you and we only want to send you emails that you actually want to receive. One-click unsubscribes are instantly honored.

What topics are you interested in?
Are you interested in our upcoming book?