Customizing Google Maps Integrations in Vue: A Step-by-Step Guide

Google Maps integrations for Vue are abundant, but it may take some time to find the one that meets your needs. However, once you find a solution that you like, you can fully customize it to bring out the colors and style that fit your project’s design. To get started, you’ll need to create a project on the Google Developers platform and generate a unique API key. Fortunately, the Google Maps APIs are well-documented and will help you through the process. After obtaining your API key, installing the vue3-google-map package is necessary to get started. With that done, you can create a Vue component and initialize it with the API key and any other parameters you require. With a properly set-up component, you’ll have access to all the features of Google Maps in Vue, giving you the freedom to customize the colors and style to your liking.

npm install vue3-google-map

Once the installation process is complete, I created a Vue component to ensure that everything is functioning as expected.

<script setup lang="ts">
import { GoogleMap} from 'vue3-google-map'
//Your location
const center = { lat: 59.40989085951935, lng: 24.643809184746956 }
//Your Google API key
const key = import.meta.env.VITE_GOOGLE_API_KEY
</script>

<template>
  <GoogleMap
    :api-key="key"
    style="width: 80%; height: 500px"
    :center="center"
    :zoom="15"
  />
</template>

The output came as expected. An empty map.

Upon successfully rendering the map on the screen, I proceeded to inspect the basic options available for customizing markers and displaying information about marked entities on the map. Through this evaluation, I was able to ascertain the flexibility and functionality of the integration and make necessary modifications to display Marker. On hover the marker will display the title and on click the Info Window appears.

<script setup lang="ts">
import { GoogleMap, Marker, InfoWindow } from 'vue3-google-map'
…
//Marker or CustomMarker options
const markerOptions = {
  position: center,
  anchorPoint: 'TOP_CENTER',
  label: 'Õ',
  title: 'Oleg Rõbnikov Web Development'
}
</script>

<template>
  <Marker :options="markerOptions">
    <InfoWindow>
      <article>
        <h1>Oleg Rõbnikov Web Development</h1>
        <h2>Address:</h2>
        <p>Õismäe tee 65–47</p>
        <p>13515 Tallinn</p>
        <p>Estonia</p>
        <h2>Contacts:</h2>
        <p>Tel: +372 5604 5484</p>
        <p>Email: oleg@rybnikov.online</p>
      </article>
    </InfoWindow>
  </Marker>
</template>

Now I have my marker in the middle of the map!

A custom marker in your preferred SVG format can be easily incorporated into the Google Map. However, it is important to note that the Info Window feature does not work with custom markers. Therefore, you will need to write a function that triggers on click, for example, to display the relevant information. In addition, the integration also provides the option to introduce custom controls, such as an SVG or emoji, directly on the Google Map.

Moreover, I took the opportunity to explore the feature and element types available in the integration to customize the look and feel of the map. I opted to use JSON to create my personalized styling, but Google Cloud styling options are also available. Some of the themes even have presets that can be easily copied from the documentation. Nonetheless, I decided to individually style each feature and element according to my preferences. You can find a detailed description of the available options in the JavaScript style reference for Google Maps, which can be accessed on the Google Developers website.

<script setup lang="ts">
import { GoogleMap, CustomMarker, CustomControl } from 'vue3-google-map'
// Feature and Element types
// https://developers.google.com/maps/documentation/javascript/style-reference
const custom = [
  {
    featureType: 'all',
    elementType: 'all',
    stylers: [
  {
    saturation: -70
  }
]
  {
  …
  },
]

//Function to alert address and contacts
const alertAddress = () => {
  alert(
    `Oleg Rõbnikov Web Development
    Address:
    Õismäe tee 65–47
    13515 Tallinn
    Estonia
    Contacts:
    Tel: +372 5604 5484
    Email: oleg@rybnikov.online`
  )
}
</script>
<template>
  <GoogleMap
    :api-key="key"
    :styles="custom"
    style="width: 80%; height: 500px"
    :center="center"
    :zoom="15"
  >
    <CustomMarker
      @click="alertAddress"
      :options="{ position: center, anchorPoint: 'TOP_CENTER' }"
    >
      <img src="@/assets/logo200black.svg" alt="Oleg Rõbnikov Web Development" />
    </CustomMarker>
    <CustomControl position="BOTTOM_CENTER">
      <a href="https://goo.gl/maps/wbDCkVD79FnrNQQA7" target="_blank">
        <img
          src="@/assets/sports-car-icon.svg"
          alt="Oleg Rõbnikov Web Development on Google Maps"
        />
      </a>
    </CustomControl>
  </GoogleMap>
</template>

And finally I get my own pink world!

In conclusion, the Google Maps integration for Vue provides developers with a powerful and flexible tool for displaying maps and customizing them to fit their specific needs. With a little effort, one can easily create customized markers, add custom controls, and tailor the styling to suit their tastes. If you are interested in exploring the full potential of this integration, I encourage you to check out my GitHub, where I have shared a complete project showcasing the Google Maps component. Additionally, you can also find a live implementation of the project on my website. By examining these resources, you can gain insights and inspiration for your own projects and create engaging and interactive maps that enhance your user experience.