Como Mostrar Google Maps con Vue JS 2.6 (Vue Cli 3.11) – Parte 2 (Final)

4 minuto(s)

Demo Github

Continuamos con la creación de un Mapa de Google con Vue JS, en el capitulo anterior Como Mostrar Google Maps con Vue JS 2.6 (Vue Cli 3.11) – Parte 1 había creado un nuevo proyecto junto con 2 componentes CargarMapa.vue y Mapa.vue , en esta Parte 2 y última terminaremos de crear los demás elementos del proyecto, vamos con el Post.

Parte 1
Parte 2 (Final)

Ahora creare el componente Marcadores.vue , este me servirá para definir los tipos de datos que componen a los marcadores de mi Mapa de Google.

Marcadores.vue

Lo primero que hago en este componente es exportar los tipos de datos que contiene mapa que son google, map y marker


props: {
  google: {
    type: Object,
    required: true
  },
  map: {
    type: Object,
    required: true
  },
  marker: {
    type: Object,
    required: true
  }
},

props: {

google: {

type: Object,

required: true

map: {

type: Object,

required: true

marker: {

type: Object,

required: true

}

Luego con el método mounted de Vue JS, llamo el array de datos que se mostrarán en mi mapa de Google


mounted() {
  const { Marker } = this.google.maps;

  new Marker({
    position: this.marker.position,
    marker: this.marker,
    map: this.map,
    title: this.marker.title
  });

},

render() {}

mounted() {

const { Marker } = this.google.maps;

new Marker({

position: this.marker.position,

marker: this.marker,

map: this.map,

title: this.marker.title

});

render() {}

A continuación todo el código del componente Marcadores.vue


<script>

  export default {
    props: {
      google: {
        type: Object,
        required: true
      },
      map: {
        type: Object,
        required: true
      },
      marker: {
        type: Object,
        required: true
      }
    },

    mounted() {
      const { Marker } = this.google.maps;

      new Marker({
        position: this.marker.position,
        marker: this.marker,
        map: this.map,
        title: this.marker.title
      });

    },

    render() {}
  };

</script>

export default {

props: {

google: {

type: Object,

required: true

map: {

type: Object,

required: true

marker: {

type: Object,

required: true

}

mounted() {

const { Marker } = this.google.maps;

new Marker({

position: this.marker.position,

marker: this.marker,

map: this.map,

title: this.marker.title

});

render() {}

};

</script>

Configuración del Mapa

Voy a crear un archivo de configuración para mi Mapa de Google, creo un directorio llamado constants, este directorio lo creare dentro del directorio src y dentro del directorio constants crearé un archivo Javascript llamado configMapa.js


/vuejs_google_maps
├── /node_modules 
├── /public
    ├── favicon.ico
    ├── index.html
├── /src
    ├── /assets
        ├── logo.png
    ├── /components
        ├── HelloWorld.vue
    ├── /constants
        ├── configMapa.js // Este Archivo 
    ├── App.vue
    ├── main.js
├──  .editorconfig
├──  .gitignore
├──  index.php
├──  package-lock.json
├──  package.json
├──  README.md
├──  vue.config.js

/vuejs_google_maps

├── /node_modules

├── /public

├── favicon.ico

├── index.html

├── /src

├── /assets

├── logo.png

├── /components

├── HelloWorld.vue

├── /constants

├── configMapa.js // Este Archivo

├── App.vue

├── main.js

├── .editorconfig

├── .gitignore

├── index.php

├── package-lock.json

├── package.json

├── README.md

├── vue.config.js

Abro el archivo que he creado llamado configMapa.js y agrego lo siguiente


const configMapa = {
  clickableIcons: false,
  streetViewControl: false,
  panControlOptions: false,
  gestureHandling: "cooperative",
  mapTypeControl: false,
  zoom: 7,
  minZoom: 3,
  maxZoom: 9
};

export { configMapa};

const configMapa = {

clickableIcons: false,

streetViewControl: false,

panControlOptions: false,

gestureHandling: "cooperative",

mapTypeControl: false,

zoom: 7,

minZoom: 3,

maxZoom: 9

};

export { configMapa};

En este archivo he agregado ciertas configuraciones que la API de Google Maps Javascript me permite realizar, al final exporto los datos de configuración para usarlos en mi componente Mapa.vue


import { configMapa } from "@/constants/configMapa";

import { configMapa } from "@/constants/configMapa";

Componente Principal

Ahora voy a llamar a todos los componentes que he creado anteriormente en un componente principal, este componente se llama App.vue , este archivo se creo automáticamente cuando realice la creación de un proyecto nuevo con Vue JS al inicio de este tutorial.

El archivo App.vue se encuentra en src > App.vue


/vuejs_google_maps
├── /node_modules 
├── /public
    ├── favicon.ico
    ├── index.html
├── /src
    ├── /assets
        ├── logo.png
    ├── /components
        ├── HelloWorld.vue
    ├── /constants
        ├── configMapa.js 
    ├── App.vue // Este Archivo 
    ├── main.js
├──  .editorconfig
├──  .gitignore
├──  index.php
├──  package-lock.json
├──  package.json
├──  README.md
├──  vue.config.js

/vuejs_google_maps

├── /node_modules

├── /public

├── favicon.ico

├── index.html

├── /src

├── /assets

├── logo.png

├── /components

├── HelloWorld.vue

├── /constants

├── configMapa.js

├── App.vue // Este Archivo

├── main.js

├── .editorconfig

├── .gitignore

├── index.php

├── package-lock.json

├── package.json

├── README.md

├── vue.config.js

Abro el archivo App.vue y agrego lo siguiente


<template>
  <div>
    <Mapa class="mapa"/>
  </div>
</template>

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

export default {
  name: "App",
  components: {
    Mapa
  }
};
</script>

<style lang="scss" scoped>
  .mapa {
    height: 425px;
  }
</style>

<div>

</div>

</template>

import Mapa from "./components/Mapa";

export default {

name: "App",

components: {

Mapa

}

};

</script>

.mapa {

height: 425px;

}

</style>

Lo que hago en el componente App.vue es definir el div con el nombre de clase o class mapa que es en donde cargaré el Mapa de Google, luego llamo al componente Mapa.vue que contiene los demás componentes y el archivo de configuración del Mapa entre otros datos


import Mapa from "./components/Mapa";

import Mapa from "./components/Mapa";

Al final agrego un estilo para el contenedor con el nombre de clase o class mapa, le doy un alto de 425 px


<style lang="scss" scoped>
  .mapa { 
    height: 425px;
  }
</style>

.mapa {

height: 425px;

}

</style>

Ultima Configuración

Por ultimo abro el archivo main.js


/vuejs_google_maps
├── /node_modules 
├── /public
    ├── favicon.ico
    ├── index.html
├── /src
    ├── /assets
        ├── logo.png
    ├── /components
        ├── HelloWorld.vue
    ├── /constants
        ├── configMapa.js 
    ├── App.vue 
    ├── main.js // Este Archivo 
├──  .editorconfig
├──  .gitignore
├──  index.php
├──  package-lock.json
├──  package.json
├──  README.md
├──  vue.config.js

/vuejs_google_maps

├── /node_modules

├── /public

├── favicon.ico

├── index.html

├── /src

├── /assets

├── logo.png

├── /components

├── HelloWorld.vue

├── /constants

├── configMapa.js

├── App.vue

├── main.js // Este Archivo

├── .editorconfig

├── .gitignore

├── index.php

├── package-lock.json

├── package.json

├── README.md

├── vue.config.js

Y agrego lo siguiente


import Vue from "vue";
import App from "./App";

Vue.config.productionTip = false;

new Vue({
  el: "#app",
  components: { App },
  template: "<App/>"
});

import Vue from "vue";

import App from "./App";

Vue.config.productionTip = false;

new Vue({

el: "#app",

components: { App },

template: "<App/>"

});

Lo que hago en el archivo main.js es llamar al componente App.vue que contiene todos los componentes y demás configuraciones del Mapa de Google.

Si arranco el servidor de Desarrollo de Vue JS en la consola de comandos


npm run serve

...
... (Continua arranque de servidor de pruebas)
...

App running at:
  - Local:   https://localhost:8080/
  - Network: https://192.168.0.14:8080/

  Note that the development build is not optimized.
  To create a production build, run npm run build.

npm run serve

...

... (Continua arranque de servidor de pruebas)

...

App running at:

- Local: https://localhost:8080/

- Network: https://192.168.0.14:8080/

Note that the development build is not optimized.

To create a production build, run npm run build.

Abro la dirección https://localhost:8080/ debe cargarme el mapa de Google renderizado reactivamente con Vue JS 2.6

Puedes agregar o quitar los marcadores que desees con sus ubicaciones respectivas, esto en el componente Mapa.vue


markers: [
  {
    id: "0",
    position: { lat: -13.1583635, lng: -72.603623 },
     title: "Machu Pichu - Cusco"
  },
  {
    id: "1",
    position: { lat: -12.025827, lng: -77.2679817 },
    title: "Lima - Perú"
  }
]

markers: [

{

id: "0",

position: { lat: -13.1583635, lng: -72.603623 },

title: "Machu Pichu - Cusco"

{

id: "1",

position: { lat: -12.025827, lng: -77.2679817 },

title: "Lima - Perú"

}

]

Si deseas ver el Mapa de Google en funcionamiento, al inicio de este Post he colocado una Demo y el repositorio GitHub con el código del proyecto.

Nota(s)

En futuras versiones de Vue JS, puede cambiar el orden, los métodos y demás configuraciones que he realizado para mostrar el Mapa de Google.

Síguenos en nuestras Redes Sociales para que no te pierdas nuestros próximos contenidos.

Como Mostrar Google Maps con Vue JS 2.6 (Vue Cli 3.11) – Parte 2 (Final)

Demo Github

Configuración del Mapa

Componente Principal

Ultima Configuración

Nota(s)

Todas Nuestras Páginas y Categorías:

Partners