How can I create a google map Vue component?

Hi Everyone! I creating a website, and want to add a google map component from scratch. I dont want to use a package manager… I am using google map style wizard, and it gave me a style.json file. In vue.js/nuxt, I am not sure how to implement the json file or api key… Should i put the api key in the nuxtconfig file or in the component page it self?

Here is code from google wizard plus some modications someone else made to add markers:

function initMap() {
  const styledMapType = new google.maps.StyledMapType(
    [
      {
        'elementType': 'geometry',
        'stylers': [
          {
            'color': '#f5f5f5'
          }
        ]
      },
      {
        'elementType': 'labels.icon',
        'stylers': [
          {
            'visibility': 'off'
          }
        ]
      },
      {
        'elementType': 'labels.text.fill',
        'stylers': [
          {
            'color': '#616161'
          }
        ]
      },
      {
        'elementType': 'labels.text.stroke',
        'stylers': [
          {
            'color': '#f5f5f5'
          }
        ]
      },
      {
        'featureType': 'administrative.land_parcel',
        'elementType': 'labels.text.fill',
        'stylers': [
          {
            'color': '#bdbdbd'
          }
        ]
      },
      {
        'featureType': 'poi',
        'elementType': 'geometry',
        'stylers': [
          {
            'color': '#eeeeee'
          }
        ]
      },
      {
        'featureType': 'poi',
        'elementType': 'labels.text.fill',
        'stylers': [
          {
            'color': '#757575'
          }
        ]
      },
      {
        'featureType': 'poi.park',
        'elementType': 'geometry',
        'stylers': [
          {
            'color': '#e5e5e5'
          }
        ]
      },
      {
        'featureType': 'poi.park',
        'elementType': 'labels.text.fill',
        'stylers': [
          {
            'color': '#9e9e9e'
          }
        ]
      },
      {
        'featureType': 'road',
        'elementType': 'geometry',
        'stylers': [
          {
            'color': '#ffffff'
          }
        ]
      },
      {
        'featureType': 'road.arterial',
        'elementType': 'labels.text.fill',
        'stylers': [
          {
            'color': '#757575'
          }
        ]
      },
      {
        'featureType': 'road.highway',
        'elementType': 'geometry',
        'stylers': [
          {
            'color': '#dadada'
          }
        ]
      },
      {
        'featureType': 'road.highway',
        'elementType': 'labels.text.fill',
        'stylers': [
          {
            'color': '#616161'
          }
        ]
      },
      {
        'featureType': 'road.local',
        'elementType': 'labels.text.fill',
        'stylers': [
          {
            'color': '#9e9e9e'
          }
        ]
      },
      {
        'featureType': 'transit.line',
        'elementType': 'geometry',
        'stylers': [
          {
            'color': '#e5e5e5'
          }
        ]
      },
      {
        'featureType': 'transit.station',
        'elementType': 'geometry',
        'stylers': [
          {
            'color': '#eeeeee'
          }
        ]
      },
      {
        'featureType': 'water',
        'elementType': 'geometry',
        'stylers': [
          {
            'color': '#c9c9c9'
          }
        ]
      },
      {
        'featureType': 'water',
        'elementType': 'labels.text.fill',
        'stylers': [
          {
            'color': '#9e9e9e'
          }
        ]
      }
    ],
    { name: 'Styled Map' });

  const location = { lat: 34.164900, lng: -118.374825 };

  // Create a map object, and include the MapTypeId to add
  // to the map type control.
  const map = new google.maps.Map(document.getElementById('map'), {
    center: location,
    zoom: 17,
    icon: true,
    disableDefaultUI: true,
    mapTypeControlOptions: {
      mapTypeIds: ['roadmap', 'satellite', 'hybrid', 'terrain',
        'styled_map']
    }
  });

  const marker = new google.maps.Marker({
    position: location,
    map: map
  });

  // Associate the styled map with the MapTypeId and set it to display.
  map.mapTypes.set('styled_map', styledMapType);
  map.setMapTypeId('styled_map');
}

I guess my main questions is where does this code go??? I am guessing it would go into scripts section of the map component I am trying to make… which I did add, but I get a run of error messages… as well…

Hi, @ainneo,

I haven’t used nuxt but I had a similar problem for a simple vue-cli I have been working on.

In a situation as yours, a typical place from where to initialize the Google Maps API is the HTML header. In my project the attachment to the header occurs dynamically after running a promise, which resolution would be attached as callback to a globally accessible API. The callback acts as the bridge between the API and your functionality and it will return as the page loads. In my project, the callback function was called GoogleMapsInit.

Once the callback GoogleMapsInit runs, it returns an unsolved promise within the main.js (loadedGoogleMapsAPI). The loadedGoogleMapsAPI promise contains all what you need from the Google Maps API. You can now export that unsolved promise from the main.js file into any component.

Once in the component (ecMapComponent.vue), I resolved the promise early in the life cycle. I did it in mounted().

By exporting the promise from the main.js into a specified component you are also passing the access to the API to that component, allowing you full control of the styling configuration from there. In my project, the initial configuration is made through a method (initMap()) in ecMapComponent.vue.

I invite you to check my project (https://github.com/evaristoc/verpijp/tree/master/app/src), but in all honesty I think this approach can be also found on the internet, perhaps explained nicer.

If you also are interested in a working demo, check the resulting project: https://ec-verpijptest.herokuapp.com/#/ (OBS: only frontend working with expiring links). An explanation of what it does you can find here: https://www.youtube.com/watch?v=WdsZxOx6z90 (NOT edited).

Success!

1 Like

thank you! this was very helpful.