Comment designer votre carte google map
Google map offres la possibilité de modifier les styles bases que vous offres son API. Ceci dans le but de rendre notre application plus captivante et originale. Dans cet article nous allons nous appuyer sur notre tutoriel de création d’une application mobile de géolocalisation avec ionic 4 pour vous apprendre à designer une carte map.
#1 – Création d’un style de mise en forme
La création de notre structure de données de mise en forme de notre carte google map est assez simple, il surfit que nous sachons exactement ceux à quoi cela nous servira. Cette structure de donnée est structure sous cette forme ci dessous :
[
{
elementType: 'geometry',
stylers: [
{
color: '#242f3e'
}
]
},
{
elementType: 'labels.text.fill',
stylers: [
{
color: '#746855'
}
]
},
{
elementType: 'labels.text.stroke',
stylers: [
{
color: '#242f3e'
}
]
},
{
featureType: 'administrative.locality',
elementType: 'labels.text.fill',
stylers: [
{
color: '#d59563'
}
]
},
{
featureType: 'poi',
elementType: 'labels.text.fill',
stylers: [
{
color: '#d59563'
}
]
},
{
featureType: 'poi.park',
elementType: 'geometry',
stylers: [
{
color: '#263c3f'
}
]
},
{
featureType: 'poi.park',
elementType: 'labels.text.fill',
stylers: [
{
color: '#6b9a76'
}
]
},
{
featureType: 'road',
elementType: 'geometry',
stylers: [
{
color: '#38414e'
}
]
},
{
featureType: 'road',
elementType: 'geometry.stroke',
stylers: [
{
color: '#212a37'
}
]
},
{
featureType: 'road',
elementType: 'labels.text.fill',
stylers: [
{
color: '#9ca5b3'
}
]
},
{
featureType: 'road.highway',
elementType: 'geometry',
stylers: [
{
color: '#746855'
}
]
},
{
featureType: 'road.highway',
elementType: 'geometry.stroke',
stylers: [
{
color: '#1f2835'
}
]
},
{
featureType: 'road.highway',
elementType: 'labels.text.fill',
stylers: [
{
color: '#f3d19c'
}
]
},
{
featureType: 'transit',
elementType: 'geometry',
stylers: [
{
color: '#2f3948'
}
]
},
{
featureType: 'transit.station',
elementType: 'labels.text.fill',
stylers: [
{
color: '#d59563'
}
]
},
{
featureType: 'water',
elementType: 'geometry',
stylers: [
{
color: '#17263c'
}
]
},
{
featureType: 'water',
elementType: 'labels.text.fill',
stylers: [
{
color: '#515c6d'
}
]
},
{
featureType: 'water',
elementType: 'labels.text.stroke',
stylers: [
{
color: '#17263c'
}
]
}
]
- l’attribut
featureTypenous permet de spécifier le type de zone sur laquelle nous voulons appliquer notre les mise en forme; - Puis l’attribut
elementTypequi permet de spécifier le type d’élément que nous souhaitons mettre designer; - Enfin l’attribut
stylersqui nous permet de définir les attributs de mise en forme qui seront applique sur l’élément spécifié. Dans cet attribut, nous avons des sous attributs commecolor: 'nom-de-la-coleur',visibility:'visible',Weight :5etc.
Il existe deux façons d’appliquer les mises en forme sur une carte google map parmi ces façons, nous avons :
1- Première méthode
La première façons d’intégrer les mises en forme sur notre carte google map consiste tout simplement à ajouter l’attribut styles:
this.map = new google.maps.Map(document.getElementById('map-tracking'), {
zoom: 16,
center: latLngMe,
styles: [
{
elementType: 'geometry',
stylers: [
{
color: '#242f3e'
}
]
},
{
elementType: 'labels.text.fill',
stylers: [
{
color: '#746855'
}
]
},
{
elementType: 'labels.text.stroke',
stylers: [
{
color: '#242f3e'
}
]
},
{
featureType: 'administrative.locality',
elementType: 'labels.text.fill',
stylers: [
{
color: '#d59563'
}
]
},
{
featureType: 'poi',
elementType: 'labels.text.fill',
stylers: [
{
color: '#d59563'
}
]
},
{
featureType: 'poi.park',
elementType: 'geometry',
stylers: [
{
color: '#263c3f'
}
]
},
{
featureType: 'poi.park',
elementType: 'labels.text.fill',
stylers: [
{
color: '#6b9a76'
}
]
},
{
featureType: 'road',
elementType: 'geometry',
stylers: [
{
color: '#38414e'
}
]
},
{
featureType: 'road',
elementType: 'geometry.stroke',
stylers: [
{
color: '#212a37'
}
]
},
{
featureType: 'road',
elementType: 'labels.text.fill',
stylers: [
{
color: '#9ca5b3'
}
]
},
{
featureType: 'road.highway',
elementType: 'geometry',
stylers: [
{
color: '#746855'
}
]
},
{
featureType: 'road.highway',
elementType: 'geometry.stroke',
stylers: [
{
color: '#1f2835'
}
]
},
{
featureType: 'road.highway',
elementType: 'labels.text.fill',
stylers: [
{
color: '#f3d19c'
}
]
},
{
featureType: 'transit',
elementType: 'geometry',
stylers: [
{
color: '#2f3948'
}
]
},
{
featureType: 'transit.station',
elementType: 'labels.text.fill',
stylers: [
{
color: '#d59563'
}
]
},
{
featureType: 'water',
elementType: 'geometry',
stylers: [
{
color: '#17263c'
}
]
},
{
featureType: 'water',
elementType: 'labels.text.fill',
stylers: [
{
color: '#515c6d'
}
]
},
{
featureType: 'water',
elementType: 'labels.text.stroke',
stylers: [
{
color: '#17263c'
}
]
}
]
});
Cette méthode se fait directement avec la déclaration de notre google map.
2- Deuxième méthode
Dans cette seconde méthode, nous déclarons notre mise en forme que nous applique à notre carte google map
const styledMapType = new google.maps.StyledMapType(
[
{
elementType: 'geometry',
stylers: [
{
color: '#242f3e'
}
]
},
{
elementType: 'labels.text.fill',
stylers: [
{
color: '#746855'
}
]
},
{
elementType: 'labels.text.stroke',
stylers: [
{
color: '#242f3e'
}
]
},
{
featureType: 'administrative.locality',
elementType: 'labels.text.fill',
stylers: [
{
color: '#d59563'
}
]
},
{
featureType: 'poi',
elementType: 'labels.text.fill',
stylers: [
{
color: '#d59563'
}
]
},
{
featureType: 'poi.park',
elementType: 'geometry',
stylers: [
{
color: '#263c3f'
}
]
},
{
featureType: 'poi.park',
elementType: 'labels.text.fill',
stylers: [
{
color: '#6b9a76'
}
]
},
{
featureType: 'road',
elementType: 'geometry',
stylers: [
{
color: '#38414e'
}
]
},
{
featureType: 'road',
elementType: 'geometry.stroke',
stylers: [
{
color: '#212a37'
}
]
},
{
featureType: 'road',
elementType: 'labels.text.fill',
stylers: [
{
color: '#9ca5b3'
}
]
},
{
featureType: 'road.highway',
elementType: 'geometry',
stylers: [
{
color: '#746855'
}
]
},
{
featureType: 'road.highway',
elementType: 'geometry.stroke',
stylers: [
{
color: '#1f2835'
}
]
},
{
featureType: 'road.highway',
elementType: 'labels.text.fill',
stylers: [
{
color: '#f3d19c'
}
]
},
{
featureType: 'transit',
elementType: 'geometry',
stylers: [
{
color: '#2f3948'
}
]
},
{
featureType: 'transit.station',
elementType: 'labels.text.fill',
stylers: [
{
color: '#d59563'
}
]
},
{
featureType: 'water',
elementType: 'geometry',
stylers: [
{
color: '#17263c'
}
]
},
{
featureType: 'water',
elementType: 'labels.text.fill',
stylers: [
{
color: '#515c6d'
}
]
},
{
featureType: 'water',
elementType: 'labels.text.stroke',
stylers: [
{
color: '#17263c'
}
]
}
],
{name: 'Styled Map'});
this.geolocation.getCurrentPosition().then((resp) => {
this.lat = resp.coords.latitude;
this.lng = resp.coords.longitude;
const latLngMe = new google.maps.LatLng(this.lat, this.lng);
this.showMe(latLngMe);
this.map = new google.maps.Map(document.getElementById('map-tracking'), {
zoom: 16,
center: latLngMe,
styles: [
{
elementType: 'geometry',
stylers: [
{
color: '#242f3e'
}
]
},
{
elementType: 'labels.text.fill',
stylers: [
{
color: '#746855'
}
]
},
{
elementType: 'labels.text.stroke',
stylers: [
{
color: '#242f3e'
}
]
},
{
featureType: 'administrative.locality',
elementType: 'labels.text.fill',
stylers: [
{
color: '#d59563'
}
]
},
{
featureType: 'poi',
elementType: 'labels.text.fill',
stylers: [
{
color: '#d59563'
}
]
},
{
featureType: 'poi.park',
elementType: 'geometry',
stylers: [
{
color: '#263c3f'
}
]
},
{
featureType: 'poi.park',
elementType: 'labels.text.fill',
stylers: [
{
color: '#6b9a76'
}
]
},
{
featureType: 'road',
elementType: 'geometry',
stylers: [
{
color: '#38414e'
}
]
},
{
featureType: 'road',
elementType: 'geometry.stroke',
stylers: [
{
color: '#212a37'
}
]
},
{
featureType: 'road',
elementType: 'labels.text.fill',
stylers: [
{
color: '#9ca5b3'
}
]
},
{
featureType: 'road.highway',
elementType: 'geometry',
stylers: [
{
color: '#746855'
}
]
},
{
featureType: 'road.highway',
elementType: 'geometry.stroke',
stylers: [
{
color: '#1f2835'
}
]
},
{
featureType: 'road.highway',
elementType: 'labels.text.fill',
stylers: [
{
color: '#f3d19c'
}
]
},
{
featureType: 'transit',
elementType: 'geometry',
stylers: [
{
color: '#2f3948'
}
]
},
{
featureType: 'transit.station',
elementType: 'labels.text.fill',
stylers: [
{
color: '#d59563'
}
]
},
{
featureType: 'water',
elementType: 'geometry',
stylers: [
{
color: '#17263c'
}
]
},
{
featureType: 'water',
elementType: 'labels.text.fill',
stylers: [
{
color: '#515c6d'
}
]
},
{
featureType: 'water',
elementType: 'labels.text.stroke',
stylers: [
{
color: '#17263c'
}
]
}
]
});
// Associate the styled map with the MapTypeId and set it to display.
this.map.mapTypes.set('styled_map', styledMapType);
this.map.setMapTypeId('styled_map');
La déclaration new google.maps.StyledMapType nous permet de créer une instance de mise en forme, elle prend en paramètre un tableau les différentes déclarations de mise en forme. Dans celle-ci nous allons nous intéressé à l’attribut this.map.mapTypes.set('styled_map', styledMapType); qui nous permettra de associer notre style à notre carte map.
#2 – Génération d’un style de mise en forme
La plateforme mapstyle with google nous offre la possibilité de générer les paramètres de mise en forme de notre carte google map et de gagner énormément en temps.
#3 – Masquer les signatures de google map sur votre map
Avant 
Après
Afin de rendre encore plus original votre carte google map, nous vous recommandons l’utilisation des déclarations css ci-dessous dans le fichier global.scss de notre application ionic
a[href^="http://maps.google.com/maps"] {
display: none !important
}
a[href^="https://maps.google.com/maps"] {
display: none !important
}
.gmnoprint a, .gmnoprint span, .gm-style-cc {
display: none;
}
.gmnoprint,.gmnoprint div {
background: none !important;
}
En définitive, il était question pour nous de vous montrer comment ajouter les mises en forme à vos cartes google map. Contrairement à l’article sur la création d’une application de traking ou nous avons créé une carte map avec les mises en forme standards. Cependant nous verrons dans le prochains article comment tracer des itinéraires sur google map. Toutefois si vous avez des questions bien vouloir leur mentionner en commentaire merci.
