Personnalisation des repères de base

Sélectionnez une plate-forme : Android iOS JavaScript

Afficher l'exemple de code source complet

Cet exemple montre comment personnaliser les repères de différentes manières : en ajoutant un titre, en les mettant à l'échelle, en modifiant la couleur de l'arrière-plan, de la bordure et du glyphe, et en masquant le glyphe.

TypeScript

const parser = new DOMParser();
const mapElement = document.querySelector('gmp-map') as google.maps.MapElement;

async function initMap() {
    // Request needed libraries.
    const { Map } = await google.maps.importLibrary("maps") as google.maps.MapsLibrary;
    const { AdvancedMarkerElement, PinElement } = await google.maps.importLibrary("marker") as google.maps.MarkerLibrary;

    // Each PinElement is paired with a marker to demonstrate setting each parameter.

    // Default marker with title text (no PinElement).
    const markerWithText = new AdvancedMarkerElement({
        position: { lat: 37.419, lng: -122.03 },
        title: 'Title text for the marker at lat: 37.419, lng: -122.03',
    });
    mapElement.append(markerWithText);

    // Adjust the scale.
    const pinScaled = new PinElement({
        scale: 1.5,
    });
    const markerScaled = new AdvancedMarkerElement({
        position: { lat: 37.419, lng: -122.02 },
    });
    markerScaled.append(pinScaled);
    mapElement.append(markerScaled);

    // Change the background color.
    const pinBackground = new PinElement({
        background: '#FBBC04',
    });
    const markerBackground = new AdvancedMarkerElement({
        position: { lat: 37.419, lng: -122.01 },
    });
    markerBackground.append(pinBackground);
    mapElement.append(markerBackground);

    // Change the border color.
    const pinBorder = new PinElement({
        borderColor: '#137333',
    });
    const markerBorder = new AdvancedMarkerElement({
        position: { lat: 37.415, lng: -122.035 },
    });
    markerBorder.append(pinBorder);
    mapElement.append(markerBorder);

    // Change the glyph color.
    const pinGlyph = new PinElement({
        glyphColor: 'white',
    });
    const markerGlyph = new AdvancedMarkerElement({
        position: { lat: 37.415, lng: -122.025 },
    });
    markerGlyph.append(pinGlyph);
    mapElement.append(markerGlyph);

    const pinTextGlyph = new PinElement({
        //@ts-ignore
        glyphText: 'T',
        glyphColor: 'white',
    });
    const markerGlyphText = new AdvancedMarkerElement({
        position: { lat: 37.415, lng: -122.015 },
    });
    markerGlyphText.append(pinTextGlyph);
    mapElement.append(markerGlyphText);

    // Hide the glyph.
    const pinNoGlyph = new PinElement({
        //@ts-ignore
        glyphText: '',
    });
    const markerNoGlyph = new AdvancedMarkerElement({
        position: { lat: 37.415, lng: -122.005 },
    });
    markerNoGlyph.append(pinNoGlyph);
    mapElement.append(markerNoGlyph);

}

initMap();
index.ts

JavaScript

const parser = new DOMParser();
const mapElement = document.querySelector('gmp-map');
async function initMap() {
    // Request needed libraries.
    const { Map } = await google.maps.importLibrary("maps");
    const { AdvancedMarkerElement, PinElement } = await google.maps.importLibrary("marker");
    // Each PinElement is paired with a marker to demonstrate setting each parameter.
    // Default marker with title text (no PinElement).
    const markerWithText = new AdvancedMarkerElement({
        position: { lat: 37.419, lng: -122.03 },
        title: 'Title text for the marker at lat: 37.419, lng: -122.03',
    });
    mapElement.append(markerWithText);
    // Adjust the scale.
    const pinScaled = new PinElement({
        scale: 1.5,
    });
    const markerScaled = new AdvancedMarkerElement({
        position: { lat: 37.419, lng: -122.02 },
    });
    markerScaled.append(pinScaled);
    mapElement.append(markerScaled);
    // Change the background color.
    const pinBackground = new PinElement({
        background: '#FBBC04',
    });
    const markerBackground = new AdvancedMarkerElement({
        position: { lat: 37.419, lng: -122.01 },
    });
    markerBackground.append(pinBackground);
    mapElement.append(markerBackground);
    // Change the border color.
    const pinBorder = new PinElement({
        borderColor: '#137333',
    });
    const markerBorder = new AdvancedMarkerElement({
        position: { lat: 37.415, lng: -122.035 },
    });
    markerBorder.append(pinBorder);
    mapElement.append(markerBorder);
    // Change the glyph color.
    const pinGlyph = new PinElement({
        glyphColor: 'white',
    });
    const markerGlyph = new AdvancedMarkerElement({
        position: { lat: 37.415, lng: -122.025 },
    });
    markerGlyph.append(pinGlyph);
    mapElement.append(markerGlyph);
    const pinTextGlyph = new PinElement({
        //@ts-ignore
        glyphText: 'T',
        glyphColor: 'white',
    });
    const markerGlyphText = new AdvancedMarkerElement({
        position: { lat: 37.415, lng: -122.015 },
    });
    markerGlyphText.append(pinTextGlyph);
    mapElement.append(markerGlyphText);
    // Hide the glyph.
    const pinNoGlyph = new PinElement({
        //@ts-ignore
        glyphText: '',
    });
    const markerNoGlyph = new AdvancedMarkerElement({
        position: { lat: 37.415, lng: -122.005 },
    });
    markerNoGlyph.append(pinNoGlyph);
    mapElement.append(markerNoGlyph);
}
initMap();
index.js

CSS

/* 
 * Always set the map height explicitly to define the size of the div element
 * that contains the map. 
 */
gmp-map {
  height: 100%;
}

/* 
 * Optional: Makes the sample page fill the window. 
 */
html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

style.css

HTML

<html>
  <head>
    <title>Advanced Marker Basic Customization</title>

    <link rel="stylesheet" type="text/css" href="./style.css" />
    <script type="module" src="./index.js"></script>
    <!-- prettier-ignore -->
    <script>(g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))})
        ({key: "AIzaSyA6myHzS10YXdcazAFalmXvDkrYCp5cLc8", v: "weekly"});</script>
  </head>
  <body>
    <gmp-map center="37.419,-122.02" zoom="14" map-id="4504f8b37365c3d0"></gmp-map>
  </body>
</html>
index.html

Essayer l'exemple

Cette page explique comment personnaliser les repères de différentes manières :

Les différentes parties d&#39;un repère avancé.
Figure 1 : Composants d'un repère avancé

Les repères avancés utilisent deux classes pour définir les repères : la classe AdvancedMarkerElement fournit les paramètres de base (position, title et map), et la classe PinElement contient des options de personnalisation plus avancées.

Pour ajouter des repères à une carte, vous devez d'abord charger la bibliothèque marker, qui fournit les classes AdvancedMarkerElement et PinElement.

L'extrait suivant montre le code permettant de créer un PinElement, puis de l'appliquer à un repère.

// Create a pin element.
const myPin = new PinElement({
    scale: 1.5,
});
// Create a marker.
const myMarker = new AdvancedMarkerElement({
    position: { lat: 37.4239163, lng: -122.0947209 },
});
// Append the pin to the marker.
myMarker.append(myPin);
// Append the marker to the map.
mapElement.append(myMarker);

Dans les cartes créées à l'aide d'éléments HTML personnalisés, les paramètres de base d'un repère sont déclarés à l'aide de l'élément HTML gmp-advanced-marker. Toute personnalisation utilisant la classe PinElement doit être appliquée de manière programmatique. Pour ce faire, votre code doit récupérer les éléments gmp-advanced-marker de la page HTML. L'extrait suivant montre le code permettant d'interroger une collection d'éléments gmp-advanced-marker, puis d'itérer sur les résultats pour appliquer la personnalisation déclarée dans PinElement.

// Return an array of markers.
const advancedMarkers = [...document.querySelectorAll('gmp-advanced-marker')];

// Loop through the markers
for (let i = 0; i < advancedMarkers.length; i++) {
  const pin = new PinElement({
      scale: 2.0,
  });

  marker.append(pin);
}

Ajouter un titre

Le texte du titre apparaît lorsque le curseur pointe sur un repère. Les lecteurs d'écran peuvent le lire.

Pour ajouter du texte de titre de manière programmatique, utilisez l'option AdvancedMarkerElement.title :

// Default marker with title text (no PinElement).
const markerWithText = new AdvancedMarkerElement({
    position: { lat: 37.419, lng: -122.03 },
    title: 'Title text for the marker at lat: 37.419, lng: -122.03',
});
mapElement.append(markerWithText);
index.js

Pour ajouter du texte de titre à un repère créé à l'aide d'éléments HTML personnalisés, utilisez l'attribut title :

<gmp-map
  center="43.4142989,-124.2301242"
  zoom="4"
  map-id="DEMO_MAP_ID"
  style="height: 400px"
>
  <gmp-advanced-marker
    position="37.4220656,-122.0840897"
    title="Mountain View, CA"
  ></gmp-advanced-marker>
  <gmp-advanced-marker
    position="47.648994,-122.3503845"
    title="Seattle, WA"
  ></gmp-advanced-marker>
</gmp-map>
index.html

Redimensionner le repère

Pour mettre à l'échelle un repère, utilisez l'option scale.

TypeScript

// Adjust the scale.
const pinScaled = new PinElement({
    scale: 1.5,
});
const markerScaled = new AdvancedMarkerElement({
    position: { lat: 37.419, lng: -122.02 },
});
markerScaled.append(pinScaled);
mapElement.append(markerScaled);
index.ts

JavaScript

// Adjust the scale.
const pinScaled = new PinElement({
    scale: 1.5,
});
const markerScaled = new AdvancedMarkerElement({
    position: { lat: 37.419, lng: -122.02 },
});
markerScaled.append(pinScaled);
mapElement.append(markerScaled);
index.js

Modifier la couleur d'arrière-plan

Utilisez l'option PinElement.background pour modifier la couleur d'arrière-plan d'un repère :

TypeScript

// Change the background color.
const pinBackground = new PinElement({
    background: '#FBBC04',
});
const markerBackground = new AdvancedMarkerElement({
    position: { lat: 37.419, lng: -122.01 },
});
markerBackground.append(pinBackground);
mapElement.append(markerBackground);
index.ts

JavaScript

// Change the background color.
const pinBackground = new PinElement({
    background: '#FBBC04',
});
const markerBackground = new AdvancedMarkerElement({
    position: { lat: 37.419, lng: -122.01 },
});
markerBackground.append(pinBackground);
mapElement.append(markerBackground);
index.js

Modifier la couleur de la bordure

Utilisez l'option PinElement.borderColor pour modifier la couleur de la bordure d'un repère :

TypeScript

// Change the border color.
const pinBorder = new PinElement({
    borderColor: '#137333',
});
const markerBorder = new AdvancedMarkerElement({
    position: { lat: 37.415, lng: -122.035 },
});
markerBorder.append(pinBorder);
mapElement.append(markerBorder);
index.ts

JavaScript

// Change the border color.
const pinBorder = new PinElement({
    borderColor: '#137333',
});
const markerBorder = new AdvancedMarkerElement({
    position: { lat: 37.415, lng: -122.035 },
});
markerBorder.append(pinBorder);
mapElement.append(markerBorder);
index.js

Modifier la couleur du glyphe

Utilisez l'option PinElement.glyphColor pour modifier la couleur du glyphe d'un repère :

TypeScript

// Change the glyph color.
const pinGlyph = new PinElement({
    glyphColor: 'white',
});
const markerGlyph = new AdvancedMarkerElement({
    position: { lat: 37.415, lng: -122.025 },
});
markerGlyph.append(pinGlyph);
mapElement.append(markerGlyph);
index.ts

JavaScript

// Change the glyph color.
const pinGlyph = new PinElement({
    glyphColor: 'white',
});
const markerGlyph = new AdvancedMarkerElement({
    position: { lat: 37.415, lng: -122.025 },
});
markerGlyph.append(pinGlyph);
mapElement.append(markerGlyph);
index.js

Utiliser du texte dans un glyphe

Utilisez l'option PinElement.glyphText pour remplacer le glyphe par défaut par un caractère de texte. Le glyphe de texte de PinElement est mis à l'échelle avec PinElement et sa couleur par défaut correspond à la glyphColor par défaut de PinElement.

TypeScript

const pinTextGlyph = new PinElement({
    //@ts-ignore
    glyphText: 'T',
    glyphColor: 'white',
});
const markerGlyphText = new AdvancedMarkerElement({
    position: { lat: 37.415, lng: -122.015 },
});
markerGlyphText.append(pinTextGlyph);
mapElement.append(markerGlyphText);
index.ts

JavaScript

const pinTextGlyph = new PinElement({
    //@ts-ignore
    glyphText: 'T',
    glyphColor: 'white',
});
const markerGlyphText = new AdvancedMarkerElement({
    position: { lat: 37.415, lng: -122.015 },
});
markerGlyphText.append(pinTextGlyph);
mapElement.append(markerGlyphText);
index.js

Masquer le glyphe

Définissez l'option PinElement.glyphText sur une chaîne vide pour masquer le glyphe d'un repère :

TypeScript

// Hide the glyph.
const pinNoGlyph = new PinElement({
    //@ts-ignore
    glyphText: '',
});
const markerNoGlyph = new AdvancedMarkerElement({
    position: { lat: 37.415, lng: -122.005 },
});
markerNoGlyph.append(pinNoGlyph);
mapElement.append(markerNoGlyph);
index.ts

JavaScript

// Hide the glyph.
const pinNoGlyph = new PinElement({
    //@ts-ignore
    glyphText: '',
});
const markerNoGlyph = new AdvancedMarkerElement({
    position: { lat: 37.415, lng: -122.005 },
});
markerNoGlyph.append(pinNoGlyph);
mapElement.append(markerNoGlyph);
index.js

Vous pouvez aussi définir PinElement.glyphColor sur la même valeur que PinElement.background. Cela a pour effet de masquer visuellement le glyphe.

Étapes suivantes :