web-dev-qa-db-fra.com

Google Maps Embed - Supprimer la marque-place

J'utilise le nouveau code d'intégration de Google Maps (iFrame) pour ajouter une petite carte à mon site Web, mais je ne peux pas masquer la nouvelle zone d'adresse dans le coin supérieur gauche (voir l'image ci-dessous).

http://i.imgur.com/JOVXkra.jpg

J'ai généré le code de la carte en cliquant sur l'option "Partager et intégrer la carte" (voir l'image ci-dessous), mais je me demande si je dois utiliser l'API complète pour y parvenir.

http://i.imgur.com/xxl25Ga.png

Toutes les ressources que j'ai trouvées jusqu'à présent ne parlent que de l'ancienne version d'intégration et de la désactivation de la bulle d'informations qui n'est pas la même, et le seul indice que j'ai est que la classe HTML de la boîte s'appelle "place-card" mais la recherche ne m'apporte toujours rien.

Toute aide ou point dans la bonne direction serait très apprécié.

google-mapsiframehidegoogle-maps-embed
22
Sintyche

Vous pouvez masquer tous les boutons avec css. Créez un débordement de largeur de div de conteneur sur les dimensions cachées et dont vous avez besoin. Placez le nouveau iframe/embarqué de google maps avec une plus grande taille. Pour positionner les cartes iframe, utilisez des marges négatives.

Exemple avec 100% de largeur:

<div style="width: 100%; overflow: hidden; height: 300px;">
  <iframe 
     src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d39797.07748547086!2d5.46683904751879!3d51.433965676849986!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x47c6d90575ca5e3d%3A0x55989f5f344b006!2sPrins+Hendrikstraat+5!5e0!3m2!1snl!2snl!4v1392716144537"
     width="100%"
     height="600"
     frameborder="0"
     style="border:0; margin-top: -150px;">
  </iframe>
</div>

Faites l'iframe 300px plus haut que votre div de conteneur. 150px pour cacher en dessous et 150px pour cacher sur le dessus. Pour masquer ces 150 en haut de l'iframe, utilisez:

margin-top: -150px;

31
Bo Pennings

vous pouvez essayer ceci:

  1. Allez à https://www.maps.ie/coordinates.html pour obtenir vos coordonnées
  2. Accédez à Google Maps et entrez ces coordonnées (virgule séparée comme ceci: 33.319663, -111.89780100000002)
  3. Cliquez sur Partager (situé à gauche)
  4. Cliquez sur Embed Map
  5. Configurez la taille de la carte que vous souhaitez
  6. Copiez le html

Votre iframe sera quelque chose comme ceci:

0
Alvin