contact@nusyce.com
+237 692 324 989 | 679 302 498
Demandez un devis
  • Accueil
  • Nos services
    • Création graphique
    • Application mobile
    • Création Site Web | Application Web
    • Marketing Digital
    • Intégration de solution métier
  • Portfolio
  • Nous contacter
  • Accueil
  • Nos services
    • Création graphique
    • Application mobile
    • Création Site Web | Application Web
    • Marketing Digital
    • Intégration de solution métier
  • Portfolio
  • Nous contacter
  • Accueil
  • Nos services
    • Création graphique
    • Application mobile
    • Création Site Web | Application Web
    • Marketing Digital
    • Intégration de solution métier
  • Portfolio
  • Nous contacter
  • Accueil
  • Nos services
    • Création graphique
    • Application mobile
    • Création Site Web | Application Web
    • Marketing Digital
    • Intégration de solution métier
  • Portfolio
  • Nous contacter
Blog
Application mobileIonic framework

Comment designer votre carte google map

admin 18 septembre 2019 0 Comments

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 featureType nous permet de spécifier le type de zone sur laquelle nous voulons appliquer notre les mise en forme;
  • Puis l’attribut elementType qui permet de spécifier le type d’élément que nous souhaitons mettre designer;
  • Enfin l’attribut stylers qui 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 comme color: 'nom-de-la-coleur', visibility:'visible' , Weight :5 etc.

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.

23
1046 Views
Géolocalisation et GoogleMap avec ionic 4PrevGéolocalisation et GoogleMap avec ionic 48 septembre 2019
Comment créer un preloader sur ionic 418 octobre 2019Comment créer un preloader sur ionic 4Next

Articles liés

Application mobileIonic framework

Comment designer votre carte google map

Google map offres la possibilité de modifier les styles bases que vous offres son...

admin 18 septembre 2019
Application mobileIonic framework

Comment créer une application mobile avec ionic 4

Ionic est un Framework de création d’application hybride multiplateformes (Android,...

admin 6 août 2019
Application mobileIonic framework

Comment faire un CRUD sur ionic 4 avec local Storage

Le local storage est une librairie utilisé sur les applications Angular pour permettre...

admin 6 août 2019

Laisser un commentaire Annuler la réponse

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Articles récents
  • Comment créer un preloader sur ionic 4
  • Comment designer votre carte google map
  • Géolocalisation et GoogleMap avec ionic 4
  • Comment ajouter une police d’écriture sur Ionic 4
  • Comment faire un crud sur Ionic 4 + Php + MySql part 2

NUSYCE est une agence numérique spécialisée dans le développement d'applications web et mobiles. Grâce aux technologies de pointe et un développement personnalisé, nous vous proposons la croissance par l'innovation.
Services
Création graphique
Application mobile
Intégration de solution
Développement d’application Web
Référencement SEO / SEA
Contacts
Adresse : Rond-point Dakar Immeuble Afriland Frist Bank Douala
Site Web: nusyce.com
Email: contact@nusyce.com
Tél: +237 692 324 989 | 679 302 498
Newsletter

VOS RÊVES, NOS RÉALISATIONS

Copyright © 2021 NUSYCE. All Rights Reserved.