web-dev-qa-db-fra.com

Intégrer Google "Mes cartes" en tant que "cartes stylées"

Je pense que cela devrait être facile, mais je ne comprends pas. J'ai trouvé deux méthodes pour intégrer une carte Google dans un site Web:

  1. Allez sur Google Maps, cliquez sur "Partager ou intégrer une carte", "Intégrer la carte", et vous obtenez un résultat similaire à celui-ci:

<iframe src="https://www.google.com/maps/embed?pb=..." width="..." height="..." frameborder="0" style="border:0" allowfullscreen></iframe>

Cela fonctionne également de manière très similaire pour Google My Maps , donnant quelque chose comme ceci:

<iframe src="https://www.google.com/maps/d/embed?mid=..." width="..." height="..."></iframe>

  1. Avec le API Google Maps JavaScript , par exemple, utilisez la procédure décrite à Démarrer le style de votre carte . Cela donne beaucoup de flexibilité - par exemple, les affaires peuvent être cachées, l'eau peut être montrée en rouge, des choses comme ça. On utilise quelque chose comme ça:

<script> function initMap() { // Styles a map in night mode. var map = new google.maps.Map(document.getElementById('map'), { center: {lat: 40.674, lng: -73.945}, zoom: 12, ... </script> <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap" async defer></script>

Donc, dans un cas, j'utilise les paramètres d'URL pour configurer la carte, dans l'autre cas, un objet JSON. Mais quelles sont les options disponibles? Puis-je créer un style pour "Ma carte" et comment puis-je saisir "Ma carte" dans l'objet JSON?

google-mapsgoogle-my-maps
1
bers

Utilisez le code ci-dessous (remplacez votre ID Mes cartes et votre clé API)

<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <title>Embedded Map</title>
    <style>
      html, body, #map-canvas {
        height: 100%;
        margin: 0px;
        padding: 0px
      }
    </style>
    <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"></script>
    <script>
var map;
var infowindow;
function initialize() {
  var mapOptions = {gestureHandling: 'cooperative'}

  map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);


  var mapLayer = new google.maps.KmlLayer({
    url: "https://www.google.com/maps/d/kml?mid=YOUR_MY_MAPS_ID"  });
  mapLayer.setMap(map);

}

google.maps.event.addDomListener(window, 'load', initialize);

    </script>
  </head>
  <body>
    <div id="map-canvas"></div>
  </body>
</html>
0
Dimi Kzs