web-dev-qa-db-fra.com

Comment supprimer une boîte de nouvelles cartes Google Maps?

Google semble avoir changé le fonctionnement de leurs iFrames. Il y a maintenant une infobox en haut à gauche qui tente d'afficher le nom du lieu. Le problème est qu’ici, en Irlande, il est souvent impossible d’utiliser le nom de l’entreprise pour localiser une carte, et il est souvent nécessaire d’utiliser le nom de la rue, etc. la carte, ainsi que sur la page à côté de la carte!

Comment puis-je me débarrasser de cette chose? Dans cet exemple, l'entreprise se trouve dans le même bâtiment que les entraîneurs irlandais. Maps insiste sur le fait qu'en indiquant l'adresse, l'avocat veut pour une raison quelconque informer ses clients potentiels de la situation de Irish Coaches!

enter image description here

J'ai essayé iwloc mais ça ne fait rien et je ne peux pas le faire via CSS et jQuery car c'est sur un autre domaine!

Des idées?

google-maps
27
Ferdia O'Brien

Cela a cessé de fonctionner vers février 2017. Ils ont dû mettre à jour leur API. :(

C'est comme ça que vous le faites!

Version de travail 

<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2381.7399040776495!2d-6.261147484122739!3d53.34791197997939!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!3m2!1sen!2sus!4v1462581622087" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>

J'ai remarqué un motif dans l'incorporation d'un autre site qui ne contenait que le texte "Agrandir la carte" et aucun élément supplémentaire. Quelques caractères seulement ont dû être supprimés.

Intégré vous êtes donné 

<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2381.7399040776495!2d-6.261147484122739!3d53.34791197997939!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x48670e84fbdd6bd3%3A0x998692b4f1b691e1!2sUlster+Bank+Chambers%2C+O&#39;Connell+Street+Lower%2C+Dublin+1%2C+Ireland!5e0!3m2!1sen!2sus!4v1462581622087" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>

C'est la partie qui a été supprimée 

1m2!1s0x48670e84fbdd6bd3%3A0x998692b4f1b691e1!2sUlster+Bank+Chambers%2C+O&#39;Connell+Street+Lower%2C+Dublin+1%2C+Ireland!5e0!

Je l'ai essayé pour d'autres adresses aussi.

23
rawnewdlz

Cela fonctionne lorsque vous utilisez des coordonnées au lieu du nom de l'entreprise, à partir du 22/01/2018

  1. Allez à Maps Ie pour obtenir vos coordonnées
  2. Allez à Google Maps et entrez ces coordonnées (séparées par des virgules comme ceci: 33.319663, -111.89780100000002)
  3. Cliquez sur Partager (situé à gauche)
  4. Cliquez sur Intégrer la carte
  5. Configurez la taille de la carte que vous voulez
  6. Copier le html

Le résultat HTML ressemble à ceci: 

<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3333.967410377096!2d-111.89998968453055!3d33.31966746342457!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x0!2zMzPCsDE5JzEwLjgiTiAxMTHCsDUzJzUyLjEiVw!5e0!3m2!1sen!2sus!4v1516690469899" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>

 Size configuration screen

16
zeta

Après avoir approfondi vos recherches, vous essayez de retirer la carte de lieu de Google Maps.

Une question similaire avait déjà été posée: Google Maps Intégrer - Supprimer un lieu

2
Shimmy

Supprimez simplement quelques caractères du code d'intégration et le tour est joué.

Embed normale:

<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3929.040079626225!2d76.32828391488012!3d10.013548175548115!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3b080cf735671585%3A0x515419464975212e!2sCoredes+-+UX+Studio!5e0!3m2!1sen!2sin!4v1536297325864" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>

Il vous suffit de supprimer les caractères compris entre 1m2! et 1sen!

Code édité:

<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3929.040079626225!2d76.32828391488012!3d10.013548175548115!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1sen!2sin!4v1536297325864" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>

J'ai essayé plus d'une douzaine d'endroits dans différents pays et j'ai bien fonctionné.

0
Tom

Vous avez deux réponses ici, une qui se débarrasse de la boîte d’informations et une autre qui pourrait répondre pour obtenir le bon emplacement dans la boîte d’informations. J'espère que l'un d'eux aide.

Enlever la boîte d'information

CAVEAT: La méthode peut être considérée comme un "piratage" et peut changer si Google modifie les fonctionnalités d'intégration sous-jacentes.

Je me suis retrouvé ici à chercher une réponse similaire et, en me basant sur ce que d'autres ont dit, je suis parvenu à cela. La réponse est semblable à d’autres, mais j’espère expliquer quelques choses sur l’URL incorporée et sur la façon de générer une URL incorporée à l’aide de lat, long et zoom (ce que vous pourriez obtenir d’un plugin de localisation dans un CMS).

En utilisant ce billet comme base de recherche, j'ai trouvé plusieurs articles décrivant une ventilation des paramètres d'intégration, qui sont des lectures intéressantes en soi: - Décodage des paramètres intégrés de Google Maps , ce qui a conduit ici http://blog.themillhousegroup.com/2016/08/deep-diving-into-google-pb-embedded-map.html

Ce que j’ai tiré de ces articles (je n’expliquerai pas tout ici encore), c’est une ventilation du paramètre "pb". "pb" est un format de propriété (?) et "m" une référence de matrice. Voici un exemple du code intégré généré à partir d'un partage incorporé de Google Maps.

<iframe src="https://www.google.com/maps/embed?pb=
    !1m18
        !1m12
            !1m3
                !1d2256.8774176856136
                !2d145.01353351606252
                !3d-37.79291244062522
            !2m3
                !1f0
                !2f0
                !3f0
            !3m2
                !1i1024
                !2i768
                !4f13.1
        !3m3
            !1m2
                !1s0x0%3A0x0
                !2zLTM3Ljc5MjkxNjcgMTQ1LjAxNTcyMjI
    !5e0
    !3m2
        !1sen
        !2suk
    !4v1532346966021
" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>

En jouant, j’ai trouvé que l’ensemble du paramètre "pb" peut être simplifié 

<iframe src="https://www.google.com/maps/embed?pb=
    !1m7
        !1m2
            !1m1
                !1d2256.8774176856136
        !3m3
            !1m2
                !1s0
                !2zLTM3Ljc5MjkxNjcgMTQ1LjAxNTcyMjI
" width="450" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>

Remarque: le nombre après le "m" a diminué pour indiquer moins d'éléments dans la "matrice"

Cette intégration ci-dessus est pour un emplacement à lat = -37.7929167, long = 145.0157222 et zoom = 17

Comme l'indique une autre réponse, il semble que si vous n'utilisez que la latitude et la longitude (avec cette API intégrée, et non l'API des lieux d'intégration), la boîte d'information n'apparaîtra pas, mais j'avais besoin de savoir comment obtenir l'URL intégrée sans y aller. via google d'abord pour générer l'URL à partir d'un partage.

Dans le "pb" décomposer, il y a quelques parties à noter

  • l'échelle de la carte 1d2256.8774176856136
  • la coordonnée 2zLTM3Ljc5MjkxNjcgMTQ1LjAxNTcyMjI

L'échelle peut être dérivée quelque peu d'un algorithme que j'ai trouvé ici https://gis.stackexchange.com/questions/7430/what-ratio-scales-do-google-maps-zoom-levels-correspond-to et ici https://www.esri.com/arcgis-blog/products/product/mapping/how-can-you-tell-what-map-scales-are-shown-for-online-maps/

mais j’ai trouvé que ce n’était pas tout à fait correct pour les chiffres que j’attendais, alors j’ai modifié le niveau de zoom pour me donner 

var mapScale = 591657550.5 / Math.pow( 2, zoom + 1);
// The results of this goes after the "1d" part in the map scale

Pour les coordonnées, utilisez base64 (l’exemple ci-dessous correspond à javascript) lat et long pour obtenir la chaîne résultante. Je l'ai eu en utilisant les deux formats décimaux degrés et degrés minutes secondes.

var base64 = btoa([lat,long]); // lazy "lat,long" formatting
// the result of this goes after the "2z" part in the coordinate

Si vous souhaitez créer un script, voici un exemple simple d'utilisation de javascript pour générer l'iframe, mais vous souhaiterez probablement créer l'intégralité du côté serveur src. Remarque: il ne s'agit pas d'une solution javascript, mais d'un exemple de solution scriptée.

    // create the iframe and with the required properties.
    var iframe = document.createElement("iframe");
    iframe.width = 450;
    iframe.height = 450;
    iframe.frameborder = 0;
    iframe.style.border = 0;
    iframe.setAttribute('allowFullScreen', '')
    document.body.appendChild(iframe)
    
    // sample lat and long.
    var lat = -37.7929167;
    var long = 145.0157222;
    var zoom = 17;
    
    // get the scale
    var mapScale = 591657550.500000 / Math.pow( 2, zoom+1);
    // get the base64 representation
    var base64 = btoa([lat,long]); // lazy "long,lat" formatting
    // set the source of the iframe
    iframe.src = 'https://www.google.com/maps/embed?key=asdfsdfsf&pb=!1m7!1m2!1m1!1d' + mapScale + '!3m3!1m2!1s0!2z' + base64;

J'ai créé ici un exemple sur codepen illustrant l'incorporation d'origine, l'intégration minifiée, l'intégration sans échelle et la solution scriptée. https://codepen.io/mcgern/pen/zLZJmQ

Nom du lieu correct dans la boîte d'information

Vous l'avez peut-être déjà essayé, mais si l'entreprise que vous souhaitez utiliser possède un identifiant Google Place, vous pourrez peut-être le trouver à l'aide de https://developers.google.com/places/place-id . Une fois que vous avez obtenu l’identifiant de lieu, vous pouvez l’utiliser à la place de l’URL intégrée comme ceci.

<iframe width="600" height="450" frameborder="0" style="border:0"
src="https://www.google.com/maps/embed/v1/place?q=place_id:ChIJ02vd- 
4QOZ0gR4ZG28bSShpk&key=<INSERT_API_KEY>" allowfullscreen></iframe>

(Je viens de trouver un endroit aléatoire qui ressemble au même bâtiment que les entraîneurs irlandais)

0
Jarrod McGuire

il vous suffit de saisir des destinations en cours de route, par exemple en indiquant une route à suivre et en supprimant les alternatives, vous pouvez toujours intégrer l’iframe.

0
Gailstorm

mi-2017, vous pouvez utiliser un indicateur de contrôle intégré dans Google api intégré dans disableDefaultUI

utilisez-le comme ceci:

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 4,
    center: {lat: -33, lng: 151},
    disableDefaultUI: true
  });
}

ref: https://developers.google.com/maps/documentation/javascript/controls#DisablingDefaults

<iframe src="https://google-developers.appspot.com/maps/documentation/javascript/examples/full/control-disableUI" width="100%" height="300" frameborder="0"></iframe>

0
Kresimir Pendic