web-dev-qa-db-fra.com

Comment utiliser Google Maps sans clé? (de statique à dynamique avec URL)

J'ai vu que de nombreux utilisateurs ont posé cette question, mais en fait, il n'y a toujours pas de réponse avec des exemples d'utilisation de Google Maps sans clé (toutes les réponses sont des références à une autre page Web).

J'ai réussi à utiliser Google Maps sans la clé, mais je n'ai réussi qu'à obtenir une carte statique. Avez-vous une idée de la dynamique de cette dynamique?

var img = new Image();

img.src = "http://maps.googleapis.com/maps/api/staticmap?center=-32.0000343,-58.0000343&zoom=5&size=300x300&sensor=true&visualRefresh=true";

return img; //OR document.body.appendChild(img);

Même si vous cliquez simplement sur ce lien, vous pouvez voir la carte et si vous modifiez les "propriétés de l'URL", vous pouvez "modifier" la carte: http://maps.googleapis.com/maps/api /staticmap?center=-32.0000343,-58.0000343&zoom=5&size=300x300&sensor=true&visualRefresh=true

Quand je dis "carte dynamique", je veux dire à quelque chose comme ceci: https://google-developers.appspot.com/maps/documentation/javascript/v2/examples/map-simple

javascriptgoogle-mapsgoogle-maps-api-3
10
gal007

Comme @geocodezip l'a dit, vous recherchez Google Maps Javascript v3 . 

Voici un exemple simple d'utilisation (tiré de mon ancienne réponse ), cela ne nécessite aucune clé.

HTML: 

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<div id="map-canvas"></div>

CSS: 

#map-canvas {
        margin: 0;
        padding: 0;
        height: 100%;
      }

Javascript: 

function initialize() {
    var myLatlng = new google.maps.LatLng(43.565529, -80.197645);
    var mapOptions = {
        zoom: 8,
        center: myLatlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

     //=====Initialise Default Marker    
    var marker = new google.maps.Marker({
        position: myLatlng,
        map: map,
        title: 'marker'
     //=====You can even customize the icons here
    });

     //=====Initialise InfoWindow
    var infowindow = new google.maps.InfoWindow({
      content: "<B>Skyway Dr</B>"
  });

   //=====Eventlistener for InfoWindow
  google.maps.event.addListener(marker, 'click', function() {
    infowindow.open(map,marker);
  });
}

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

J'ai créé un simple violon pour votre référence.

J'espère que vous avez une idée.

Puisque vous n'êtes pas intéressé par les touches, Attention aux limites .

API JavaScript de Google Maps: jusqu’à 25 000 chargements de carte par jour pour chaque service .

Ceci comprend:

  1. une carte s'affiche à l'aide de l'API JavaScript de Maps (V2 ou V3) lorsque
    chargé par une page Web ou une application;
  2. un panorama Street View est affiché à l'aide de l'API JavaScript de Maps (V2 ou V3) par une page Web ou une application qui n'a pas également affiché une carte ;
  3. un fichier SWF qui charge l'API Google Maps pour Flash est chargé par une page Web ou une application ; ou
  4. une seule demande est faite pour une image de carte à partir de l'API Static Maps.
  5. une seule demande est faite pour une image panoramique à partir de l'API Image de Street View .

De vos commentaires,

J'ai moi aussi essayé d'utiliser canvas, cela ne fonctionnait pas.

 var mapCanvas = document.createElement("canvas");

Mais cela fonctionne bien avec l'élément div.

var mapCanvas = document.createElement("div");
mapCanvas.style.width = "200px";
mapCanvas.style.height = "200px";

JSFiddle mis à jour

N'oubliez pas de définir les propriétés width et height.

13
Praveen

Cela a fonctionné pour moi. Je l'ai essayé sur localhost. Plusieurs autres solutions dans stackoverflow n'ont pas aidé.

<iframe width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.com/maps?q=<?php echo urlencode($address); ?>&amp;output=embed"></iframe><br />

De cette façon, nous pouvons générer des cartes de manière dynamique en fonction de l'adresse que nous avons entrée dans le back-end.

15
user46487

Je mets un exemple sur plunker

http://plnkr.co/T4eULTnKbWCKlABPI4pu

et le code 

<!DOCTYPE html>
<html>
<body>

<iframe width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.com/maps?q=London&amp;ie=UTF8&amp;&amp;output=embed"></iframe><br />

</body>
</html>
3
ackuser

Utilisez le Google Maps Javascript API v3 (beaucoup de bons exemples dans la documentation )

1
geocodezip

essayez-le depuis un téléphone Android 

href = "google.streetview:cbll=51.470305,-0.183842&cbp=1,10,,0,2.0&mz=mapZoom"

ajoutez ceci à votre lien d'ancre 

0
Yene Mulatu