Utilisation de l'API Google Maps

---

Présentation

Cette tâche concerne Azura, un projet de promotion immobilière situé à Romanel-sur-Lausanne. Pour ce projet, nous n'avons pas utilisé la même technologie que d'habitude (Fractal Styleguide, Wordpress) et nous avons fait le choix de tenter avec une nouvelle technologie, mieux adaptée au besoin du projet et qui nous permettrait d'apprendre de nouvelles choses. Nous avons donc choisis d'utiliser Vue.js.

Un des premiers changement avec cette technologie, c'est que tout le code concernant le composant en lui même se retrouve dans un seul fichier .vue (par exemple: Button.vue), au lieu de 3 fichiers aupravant (button.hbs, button.css, button.config.js). Le 2e gros changement concerne les vues : en gros, on crée notre composant dans notre fichier .vue, puis on l'importe dans une vue (par exemple: ButtonView.vue) pour pouvoir l'afficher. Ce sont les vues qui sont rendues à l'écran.

---

La Map

Le composant dont je vait parler aujourd'hui est une map, voici à quoi elle ressemble sur la maquette :

---

Pour la faire, j'ai d'abord trouvé une librairie qui utilise l'API de Google Maps mais spécialement adaptée pour Vue.js et je l'ai importée au projet, en l'ajoutant d'abord dans le fichier package.json puis dans le fichier main.js avec ces quelques lignes de code :

import * as VueGoogleMaps from 'vue2-google-maps'

Vue.use(VueGoogleMaps, {
  load: {
    key: 'AIzaSyCmmKw4Emd88uvslBt_XvAGKgijT8Q2q6c'
  }
})

---

Une fois la librairie ajoutée au projet, j'ai pu l'utliser dans mon fichier composant Map.vue avec les tags HTML <gmap><gmap/>, en passant les options nécessaires (coordonnées, marqueurs, ect...) :

<template>
  <gmap-map class="gmap" :options="{ styles: styles, disableDefaultUI: disableDefaultUI, zoomControl: zoomControl }" :center="mapCenter" :zoom="14">
    <gmap-marker :icon="icon" :position="{ lat: 46.564506, lng: 6.606957 }"></gmap-marker>
  </gmap-map>
</template>

---

Certaines options sont écrites en dur, comme le zoom, d'autres sont dynamiques, comme le style ou encore l'icone. Ces paramètres sont ainsi définis juste en dessous dans la partie JavaScript :

import imgMarker from '@/assets/map-marker.svg'
import mapStyle from '@/assets/map-style.json'

export default {
  name: 'Map',
  props: {
    mapCenter: {
      type: Object
    }
  },
  data () {
    return {
      disableDefaultUI: true,
      zoomControl: true,
      styles: mapStyle,
      icon: imgMarker
    }
  }
}

Les 2 lignes du haut importent l'image du marqueur Azura sur la map, ainsi qu'un fichier JSON contenant le style de la map, pour qu'elle soit en noir et blanc comme sur la maquette. Les options passées dans le HTML comme par exemple :icon="icon" ou :options="{ styles: styles, disableDefaultUI: disableDefaultUI, zoomControl: zoomControl } sont définies dans la fonction data () qui retourne toutes les valeurs.

---

Voici ce que ça donne en vidéo

---

Le code complet

HTML

<gmap-map class="gmap" :options="{ styles: styles, disableDefaultUI: disableDefaultUI, zoomControl: zoomControl }" :center="mapCenter" :zoom="14">
    <gmap-marker :icon="icon" :position="{ lat: 46.564506, lng: 6.606957 }"></gmap-marker>
</gmap-map>

JavaScript

import imgMarker from '@/assets/map-marker.svg'
import mapStyle from '@/assets/map-style.json'

export default {
  name: 'Map',
  props: {
    mapCenter: {
      type: Object
    }
  },
  data () {
    return {
      disableDefaultUI: true,
      zoomControl: true,
      styles: mapStyle,
      icon: imgMarker
    }
  }
}

JSON

[
  {
    "featureType": "administrative",
    "elementType": "all",
    "stylers": [
      {
        "visibility": "on"
      },
      {
        "saturation": -100
      },
      {
        "lightness": 20
      }
    ]
  },
  {
    "featureType": "road",
    "elementType": "all",
    "stylers": [
      {
        "visibility": "on"
      },
      {
        "saturation": -100
      },
      {
        "lightness": 40
      }
    ]
  },
  {
    "featureType": "water",
    "elementType": "all",
    "stylers": [
      {
        "visibility": "on"
      },
      {
        "saturation": -10
      },
      {
        "lightness": 30
      }
    ]
  },
  {
    "featureType": "landscape.man_made",
    "elementType": "all",
    "stylers": [
      {
        "visibility": "simplified"
      },
      {
        "saturation": -60
      },
      {
        "lightness": 10
      }
    ]
  },
  {
    "featureType": "landscape.natural",
    "elementType": "all",
    "stylers": [
      {
        "visibility": "simplified"
      },
      {
        "saturation": -60
      },
      {
        "lightness": 60
      }
    ]
  },
  {
    "featureType": "poi",
    "elementType": "all",
    "stylers": [
      {
        "visibility": "off"
      },
      {
        "saturation": -100
      },
      {
        "lightness": 60
      }
    ]
  },
  {
    "featureType": "transit",
    "elementType": "all",
    "stylers": [
      {
        "visibility": "off"
      },
      {
        "saturation": -100
      },
      {
        "lightness": 60
      }
    ]
  }
]

Tout le fichier (Map.vue)

<template>
  <gmap-map class="gmap" :options="{ styles: styles, disableDefaultUI: disableDefaultUI, zoomControl: zoomControl }" :center="mapCenter" :zoom="14">
    <gmap-marker :icon="icon" :position="{ lat: 46.564506, lng: 6.606957 }"></gmap-marker>
  </gmap-map>
</template>

<script>
import imgMarker from '@/assets/map-marker.svg'
import mapStyle from '@/assets/map-style.json'

export default {
  name: 'Map',
  props: {
    mapCenter: {
      type: Object
    }
  },
  data () {
    return {
      disableDefaultUI: true,
      zoomControl: true,
      styles: mapStyle,
      icon: imgMarker
    }
  }
}
</script>

<style lang="scss" scoped>
.gmap {
  width: 100%;
  height: 100%;
  min-width: 280px;
  max-width: 1124px;
  min-width: 280px;
  max-height: 300px;

  @include media ($small-size) {
    max-height: 400px;
  }

  @include media ($medium-size) {
    max-height: 618px;
  }
}
</style>