Anciens exemples

Android

Exécuter l'application exemple ApiDemos

Pour exécuter l'application exemple ApiDemos, consultez l'exemple GitHub (Java | Kotlin) et regardez la démo CloudBasedMapStylingDemoActivity (Java | Kotlin).

Vous trouverez un exemple d'application Java et Kotlin qui montre comment appliquer un style à votre carte Android depuis le cloud.

Problèmes connus

Une fois votre application livrée aux clients, vous pouvez modifier les styles personnalisés des cartes avec ID de carte depuis la console Google Cloud. Les nouveaux styles apparaîtront dans votre application quelques heures plus tard.

Pour vous assurer que les nouveaux styles personnalisés s'affichent immédiatement à des fins de test, effacez les données de l'application sur votre appareil de test. Pour savoir comment supprimer des données sur votre appareil, consultez l'Aide Android – Libérer de l'espace.

Notez que les paramètres peuvent varier selon le téléphone. Pour en savoir plus, contactez le fabricant de votre appareil.

iOS

Exécuter l'application exemple ApiDemos

Pour exécuter l'application exemple ApiDemos, consultez l'exemple d'application Google Maps GitHub et affichez le projet CloudBasedMapStylingViewController (exemple GitHub pour Swift | Objective-C).

Démonstration facultative de la personnalisation dans le cloud avec CocoaPod ou GitHub

Au lieu de partir de zéro, vous pouvez essayer notre exemple d'application Objective-C qui montre comment appliquer un style à votre carte iOS depuis le cloud. Pour en savoir plus, consultez l'exemple Objective-C.

Créer l'application de démonstration bêta

Dans Xcode, cliquez sur le bouton de compilation pour créer puis exécuter le schéma actuel. La compilation génère une erreur vous invitant à saisir votre clé API dans le fichier SDKDemoAPIKey.h.

Si vous ne disposez pas encore de clé API, configurez un projet dans la console Cloud et obtenez une clé API en suivant les instructions de la section Obtenir une clé API. Lors de la configuration de la clé dans la console Cloud, vous pouvez spécifier l'identifiant du bundle de votre application pour vous assurer que seule votre application peut l'utiliser. L'identifiant de bundle par défaut de l'application exemples du SDK est com.example.GoogleMapsDemos.

Modifiez le fichier SDKDemoAPIKey.h et collez votre clé API dans la définition de la constante kAPIKey:

static NSString *const kAPIKey = @"YOUR_API_KEY";

Si Xcode vous invite à déverrouiller le fichier SDKDemoAPIKey.h pour le modifier, sélectionnez Déverrouiller.

Supprimez la ligne suivante:

```
#error Register for API Key and insert here.
```

Créez et exécutez le projet.

Démonstration de la personnalisation de cartes dans le cloud

La démonstration CloudStyling montre comment appliquer un style à la carte en utilisant un style défini dans la console Google Cloud.

Au lancement de l'application de démonstration, cliquez sur la démo de la personnalisation de carte dans la section "Exemples bêta" en haut de la liste.

Cliquez sur Style de la carte pour voir les effets du chargement de différents ID de carte.

Vous pouvez également essayer d'ajouter votre propre style ("Style de carte" > "Ajouter un nouvel ID de carte"), puis voir la carte se mettre à jour avec votre carte avec styles personnalisée.

JavaScript

Voici un exemple de base de chargement d'une carte avec styles personnalisée à l'aide d'un ID de carte. Dans ce cas, le JavaScript Maps fait référence à l'ID de carte 8e0a97af9386fef lors du chargement de la carte et applique automatiquement le style associé à l'ID de carte.

TypeScript

function initMap(): void {
  new google.maps.Map(
    document.getElementById("map") as HTMLElement,
    {
      mapId: "8e0a97af9386fef",
      center: { lat: 48.85, lng: 2.35 },
      zoom: 12,
    } as google.maps.MapOptions
  );
}

declare global {
  interface Window {
    initMap: () => void;
  }
}
window.initMap = initMap;
index.ts

JavaScript

function initMap() {
  new google.maps.Map(document.getElementById("map"), {
    mapId: "8e0a97af9386fef",
    center: { lat: 48.85, lng: 2.35 },
    zoom: 12,
  });
}

window.initMap = initMap;
index.js
Voir l'exemple

Essayer avec un exemple

API Maps Static

Un ID de carte est un identifiant associé à un style de carte ou un élément géographique spécifique. Configurez un style de carte et associez-le à un ID de carte dans la console Google Cloud. Ensuite, lorsque vous référencez un ID de carte dans votre code, le style de carte qui lui est associé s'affiche dans votre application. Toutes les modifications de style apportées par la suite apparaissent automatiquement dans votre application, sans que vos clients aient besoin d'effectuer des mises à jour.

  1. Si vous utilisez les styles de cartes basés dans le cloud avec une carte existante personnalisée avec le paramètre style, veillez à les supprimer pour éviter tout risque de conflit avec les futures fonctionnalités.

  2. Pour ajouter un ID de carte à une carte nouvelle ou existante qui utilise l'une de nos API Web, ajoutez le paramètre d'URL map_id et définissez-le sur votre ID de carte. Cet exemple montre comment ajouter un ID de carte à une carte à l'aide de l'API Maps Static.

    <img src="https://maps.googleapis.com/maps/api/staticmap?center=Brooklyn+Bridge,New+York,NY&zoom=13&size=600x300&maptype=roadmap&markers=color:blue%7Clabel:S%7C40.702147,-74.015794&markers=color:green%7Clabel:G%7C40.711614,-74.012318&markers=color:red%7Clabel:C%7C40.718217,-73.998284&key=YOUR_API_KEY&map_id=YOUR_MAP_ID&signature=YOUR_SIGNATURE" />