Mostrar Ubicación en Google Map Vue js

En este articulo veremos como integrar los mapas de  google map en nuestros proyectos vue usando la librería npm vue2-google-maps.

Lo primero que aremos es crear un nuevo proyecto vue usando su cli en mi caso lo  llamare vuemap

vue create vuemap

Una vez creado nuestro proyecto lo abrimos en visual code y usando la terminal instalamos la librería mediante npm 

una vez se instale iremos a nuestro archivo main.js y agregaremos el siguiente código

import * as VueGoogleMaps from "vue2-google-maps";

Vue.use(VueGoogleMaps, {
  load: {
    key: "AIzaSyDp3Ud3SixagW8bJOwtosy5bBMB5JRNS_k",
  },
});

Lo primero es importar la librería y luego cargarla usando una api key de google(en este caso utilizo una de prueba para desarrolladores).

Ahora para cargar el mapa lo que aremos es crear un nuevo componente llamado GoogleMap

dentro de este componente tendremos el siguiente código 

<template>
  <gmap-map
    :center="center"
    :zoom="16"
    style="width: 100%; height: 500px"
  >
    <gmap-marker
      :key="index"
      v-for="(m, index) in markers"
      :position="m.position"
      :title="m.title"
      :clickable="true"
      :draggable="true"
      @click="center=m.position"
    ></gmap-marker>
  </gmap-map>
</template>
<script>
  export default {
    data () {
      return {
        
        center: {lat: this.latitude, lng: this.longitude},
        markers: [{
          position: {lat: this.latitude, lng: this.longitude},
          title: this.title
        }]
      }
    },

    props: {
        latitude: Number,
        longitude: Number,
        title: String
    }
  }
</script>

Básicamente lo que hacemos acá es configurar nuestro mapa con propiedades que trae la librería que instalamos, y usando props recibiremos la localización  que queremos mostrar en nuestro mapa. 

Para poder mostrar nuestro mapa lo aremos en nuestro componente principal App.vue

<template>
  <div id="app">
    <div class="row">
       <h1 style="text-align: center;">Proyecto Vue Google Map</h1>
       <GoogleMap :latitude= 13.7013266 :longitude= -89.226622 :title="'Titulo Marcador'" />
    </div>

  </div>
</template>

<script>
import GoogleMap from "./components/GoogleMap";

export default {
  name: 'App',
  components: {
    GoogleMap
  }
}
</script>

Como ven lo único que hacemos es importar nuestro componente que creamos anteriormente y enviarle el valor de las propiedades.

Si corremos nuestro proyecto npm run serve obtendremos el siguiente resultado.

De esta manera pueden integrar de manera fácil un mapa en sus proyectos de vue.

Pueden descargar el proyecto desde mi repositorio en github vuemap 

si quieren donarme para una soda lo pueden hacer aqui.