Google Maps Vue.js example

A simple code example on how to use google map in vue.js or nuxt. 

To use google maps in ES6 or VueJS we need a loader. The best of these is GoogleMapsApiLoader. U can install it with the command npm install --save google-maps-api-loader Next, create a file that will initialize and show the googlemap. Next, see the code and read the comments in it.

<template>
    <div>
        <!-- That block must have position:relative and width|height -->
        <div class="relative google-map" ref="googleMap"></div>
    </div>
</template>
<script>

// Importing loader module
import GoogleMapsApiLoader from 'google-maps-api-loader'

export default {
    // Get props from parent component (U can change needed props)
    props: {
        markers: Array,
        center: Object,
        zoom: Number
    },
   
    data() {
        return {
            // Declarate global variable
            google: null,
            map: null,
            // There must be your api key (its important)
            apiKey: 'Your API Key',
            // Map options (default by google)
            mapConfig: {
                // Set lat and lng from props (Important option)
                center: this.center,
                scaleControl: true,
                scrollwheel: true,
                // Set zoom from props (Important option)
                zoom: this.zoom,
                streetViewControl: false,
                mapTypeControl: false,
                zoomControl: false,
                mapTypeId: 'roadmap',
                fullscreenControl: false,
                clickableIcons: false,
                // There u can add your custom styles
                // u can find some styles on https://mapstyle.withgoogle.com/
                styles: []
            }
        }
    },

    // Aysnc is important on API 3.0
    async mounted() {

        // Wait map inited
        const googleMapApi = await GoogleMapsApiLoader({
            apiKey: this.apiKey
        })
        

        // Init map and set google data() varibale
        this.google = googleMapApi
        this.initializeMap()
    },
    
    methods: {
        // Map init function (initing in async mounted)
        initializeMap() {
            // Get container from ref in template
            const mapContainer = this.$refs.googleMap
            // Create new map
            this.map = new this.google.maps.Map(mapContainer, this.mapConfig)
            // Hack to pass the event to an internal function
            const vl = this
            // Get and Set markers and tooltip on a map
            this.markers.forEach(function(mker) {

                // Create Tooltip
                const infowindow = new vl.google.maps.InfoWindow({
                    // Set tooltip html 
                    content: `
                        <div id="popupInfo" class="tooltipStyle from your css">
                            ${mker.address}
                        </div>

                        // Hack to restyle tooltip block
                        <style>
                            .gm-style-iw {
                                box-shadow: 0 20px 60px rgba(19, 22, 47, 0.1) !important;
                                border-radius: 10px !important;
                            }

                        </style>
                    `,
                    maxWidth: 260
                })
                
                // create Markers from props from parent component (see below) 
                const velp = new vl.google.maps.Marker({
                    position: {
                        lat: mker.lat,
                        lng: mker.lng
                    },
                    map: vl.map,
                    title: mker.caption,
                    icon: mker.icon
                })
                
                // add click open marker event
                velp.addListener('click', function() {
                    infowindow.open(vl.map, velp)
                })
            })
        }
    }
}
</script>

Init component is ready. Now insert map in your page template:

<template>
  <div>
     // Include map on your page with parametres from data()
     <map-block
        :markers="mapinform.markers"
        :center="mapinform.center"
        :zoom="mapinform.zoom"
     ></map-block>
  </div>
</template>


<script>
// Link to the component we wrote above
import mapBlock from '~/components/map/mapBlock.vue'

export default {
    data() {
        return {
            mapinform: {
                // Map center
                center: { lat: 45.508, lng: -73.587 },
                // Map scale
                zoom: 7,
                // Markers array (You need to replace icon with your picture, or the marker will be hidden.)
                markers: [
                    {
                        lat: 45.508,
                        lng: -73.587,
                        caption: 'Caption on marker 1',
                        address: 'Tooltip content 1',
                        icon: '/mapmarker.png'
                    },
                    {
                        lat: 46,
                        lng: -73.587,
                        caption: 'Caption on marker 2',
                        address: 'Tooltip content 2',
                        icon: '/mapmarker.png'
                    }
                ]
            }
        }
    },
    // Declare component
    components: {
        mapBlock
    }
}
</script>

Congr 🐱‍👤 Thats work.

In the same way that we connected markers, you can draw lines, connect tooltips and use all the functionality of the Google Maps API. Just remember to enable JS and Embed support in your Google Console.