it-swarm.com.de

Wie verwende ich Google Maps ohne Schlüssel? (von statisch zu dynamisch mit URL)

Ich habe gesehen, dass viele Nutzer diese Frage gestellt haben, aber es gibt immer noch keine Antworten mit Beispielen für die Verwendung von Google Maps ohne Schlüssel (alle Antworten sind Verweise auf andere Webseiten).

Es ist mir gelungen, Google Maps ohne den Schlüssel zu verwenden, aber ich habe nur eine statische Karte erhalten. Haben Sie eine Idee, wie diese Dynamik funktioniert?

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); 

Selbst wenn Sie einfach auf diesen Link klicken, können Sie die Karte sehen. Wenn Sie die "URL-Eigenschaften" ändern, können Sie die Karte "bearbeiten": http://maps.googleapis.com/maps/api/staticmap ? center = -32.0000343, -58.0000343 & zoom = 5 & size = 300x300 & sensor = true & visualRefresh = true

Wenn ich "dynamische Karte" sage, meine ich damit Folgendes: https://google-developers.appspot.com/maps/documentation/javascript/v2/examples/map-simple

10
gal007

Wie @geocodezip sagte, suchen Sie nach Google Maps Javascript v3

Hier ist ein einfaches Beispiel für die Verwendung (ausgewählt aus meinem alte Antwort ), dies erfordert keine Schlüssel.

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);

Ich habe eine einfache Geige als Referenz erstellt.

Ich hoffe du hast eine Idee.

Da Sie kein Interesse an der Verwendung von Schlüsseln haben, ist Vorsicht vor den Grenzen .

Google Maps Javascript API: Bis zu 25.000 Kartenladevorgänge pro Tag für jeden Bedienung.

Das beinhaltet:

  1. eine Karte wird unter Verwendung der Maps JavaScript API (V2 oder V3) angezeigt
    von einer Webseite oder Anwendung geladen;
  2. ein Street View-Panorama wird mit der Google Maps JavaScript-API (V2 oder V3) von einer Webseite oder Anwendung angezeigt, die nicht ebenfalls amap angezeigt hat.
  3. eine SWF-Datei, die das Maps-API für Flash lädt, wird von einer Webseite oder einer __.-Anwendung geladen. oder
  4. es wird eine einzige Anforderung für ein Kartenbild von der Static Maps-API gestellt.
  5. es wird eine Einzelanforderung für ein Panoramabild über die Street View Image-API gestellt.

Aus Ihren Kommentaren

Ich versuchte es auch mit canvas, es funktionierte nicht.

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

Dies funktioniert jedoch gut mit dem Element div.

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

Aktualisiertes JSFiddle

Vergessen Sie nicht, die Eigenschaften für Breite und Höhe einzustellen.

13
Praveen

Das hat bei mir funktioniert. Ich habe es bei localhost versucht. Verschiedene andere Lösungen in stackoverflow haben nicht geholfen.

<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 />

Auf diese Weise können wir basierend auf der Adresse, die wir im Backend eingegeben haben, Karten dynamisch generieren.

15
user46487

Ich füge plunker ein Beispiel hinzu

http://plnkr.co/T4eULTnKbWCKlABPI4pu

und der 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
1
geocodezip

probieren Sie es vom Android-Handy aus 

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

fügen Sie dies Ihrem Ankerlink hinzu 

0
Yene Mulatu