<commit_before>+++
date = "2018-12-23T06:29:29+02:00"
title = "Using the Google Maps API with Vue.js"
description = "Learn how to use the Google Maps API and how to use marker clustering in combination with Vue.js"
intro = "In today’s article we take a look at how we can use the Google Maps API in combination with Vue.js. We will build a simple Vue.js component which renders a Google Map. Furthermore we will find out how we can listen for click events on markers and how we can cluster multiple markers in close distance to each other..."
draft = false
categories = ["Development"]
tags = ["JavaScript", "Vue"]
images = ["https://res.cloudinary.com/maoberlehner/image/upload/c_scale,f_auto,q_auto/v1532158513/blog/2018-12-23/vue-google-map-twitter-card"]
+++

In today’s article we take a look at how we can use the Google Maps API in combination with Vue.js. **We will build a simple Vue.js component which renders a Google Map.** Furthermore we will find out how we can listen for click events on markers and how we can cluster multiple markers in close distance to each other.

You can [take a look at the complete source code on GitHub](https://github.com/maoberlehner/using-the-google-maps-api-with-vue) or you can [checkout the demo application hosted on Netlify](https://using-the-google-maps-api-with-vue.netlify.com/).

## The vue2-google-maps plugin

Before we get started with building our own custom implementation, let me point out that there already is a pretty nice Vue.js plugin named `vue2-google-maps` which makes it possible to assemble a map with its markers in a declarative manner. 

```html
<GmapMap :center="{ lat: 10, lng: 10 }">
  <GmapMarker
    v-for="(m, index) in markers"
    :key="index"
    :position="m.position"
    @click="center = m.position"
  /><commit_msg>Add emphasize<commit_after>+++
date = "2018-12-23T06:29:29+02:00"
title = "Using the Google Maps API with Vue.js"
description = "Learn how to use the Google Maps API and how to use marker clustering in combination with Vue.js"
intro = "In today’s article we take a look at how we can use the Google Maps API in combination with Vue.js. We will build a simple Vue.js component which renders a Google Map. Furthermore we will find out how we can listen for click events on markers and how we can cluster multiple markers in close distance to each other..."
draft = false
categories = ["Development"]
tags = ["JavaScript", "Vue"]
images = ["https://res.cloudinary.com/maoberlehner/image/upload/c_scale,f_auto,q_auto/v1532158513/blog/2018-12-23/vue-google-map-twitter-card"]
+++

In today’s article we take a look at how we can use the Google Maps API in combination with Vue.js. **We will build a simple Vue.js component which renders a Google Map.** Furthermore we will find out how we can **listen for click events on markers and how we can cluster multiple markers in close distance to each other.**

You can [take a look at the complete source code on GitHub](https://github.com/maoberlehner/using-the-google-maps-api-with-vue) or you can [checkout the demo application hosted on Netlify](https://using-the-google-maps-api-with-vue.netlify.com/).

## The vue2-google-maps plugin

Before we get started with building our own custom implementation, let me point out that there already is a pretty nice Vue.js plugin named `vue2-google-maps` which makes it possible to assemble a map with its markers in a declarative manner. 

```html
<GmapMap :center="{ lat: 10, lng: 10 }">
  <GmapMarker
    v-for="(m, index) in markers"
    :key="index"
    :position="m.position"
    @click="center = m.position"
  />
{'fraction_non_alphanumeric': 0.09544950055493896, 'fraction_numerical': 0.023307436182019976, 'mean_word_length': 4.22463768115942, 'pattern_counts': {'":': 0, '<': 7, '<?xml version=': 0, '>': 7, 'https://': 6, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 2, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '2268459', 'n_tokens_mistral': 1144, 'n_tokens_neox': 1042, 'n_words': 479}