Karte mit Marker auf der AMP-HTML-Seite einbinden

Momentan verwende ich das Google Maps-API, um eine Karte mit einem Marker (mit einem Längen-/Längenkoordinatensatz) für einen bestimmten Ort zu erstellen. In AMP HTML scheint es, dass dies derzeit mit der ampl-iframe-Erweiterung https://github.com/ampproject/amphtml/tree/master/extensions geschieht. Das Problem besteht darin, dass Sie Google Maps-Einbettungscode mit Koordinaten nur verwenden können, wenn Sie eine "Ansichtskarte" verwenden. Ich habe keine Orts-ID, daher kann ich den Ortsmodus nicht verwenden. Ich kann den Ansichtsmodus nicht verwenden, da dieser keine Markierungen hat. Ich habe hoch und niedrig auf https://developers.google.com/maps/documentation/embed/guide#overview Karte mit Marker auf der AMP-HTML-Seite einbinden

geschaut Wie ist der richtige Weg, um eine Google Map auf eine AMP-HTML-Seite, die eine Marke platziert hat enthalten? Ich sehe keine bestehenden Fragen dazu im Forum oder in Github-Themen, also bin ich gespannt, ob noch jemand auf dasselbe Szenario gestoßen ist.

Quelle

2016-03-21 Du3

Sie haben Recht in * "es die Art und Weise zu tun scheint Dies verwendet derzeit die Verstärker-Iframe-Erweiterung "*". Karten arbeiten mit 'amp-iframe', statische Karten sollten gut funktionieren mit' amp-img' und 'amp-click-to-play' sollten sie wirklich gut zusammenarbeiten lassen. Ich denke, Maps mit Markern wird in Amp HTML noch nicht unterstützt, es sei denn, Sie verwenden eine 'view'-Map. Überprüfen Sie dies [Beispiel] (https://github.com/ampproject/amphtml/blob/master/examples/released.amp.html). – abielita

Bitte geben Sie einen Gist oder JSFiddle mit Ihren bevorzugten Karten ein. Wir werden eine darauf basierende Lösung finden. Auch haben Sie dieses Beispiel gesehen: https://ampbyexample.com/components/amp-iframe/#example11 – ade

beide Ihrer Beispiele erfordern eine Orts-ID, die ich nicht habe. Ich habe nur Koordinaten. Ich möchte Marker fallen lassen. Derzeit müssen Sie dies mit Javascript mit Google Map API tun. Wenn AMP HTML Rich Snippets haben soll, die das Behind the Scenes Javascript ersetzen, dann scheint dies die einzige Möglichkeit dies zu erreichen, indem Sie die Orts-ID von der Koordinatenserverseite mit dem Google Maps API nachschlagen und dann die PlaceID verwenden. Die Frage hier - gibt es eine andere Möglichkeit, dieses Szenario zu behandeln, ohne auf der Seite eines Place-ID-Servers nachzuschlagen. Karten über Koordinaten und Markierungen sind sehr üblich. – Du3

fand ich diesen Code auf der GitHub-Repository https://github.com/ampproject/amp-by-example/blob/master/src/20_Components/amp-iframe.html#L62-L72

<amp-iframe width="600" height="400" 
          layout="responsive" 
          sandbox="allow-scripts allow-same-origin allow-popups" 
          frameborder="0" 
          src="https://www.google.com/maps/embed/v1/place?q=place_id:ChIJ2eUgeAK6j4ARbn5u_wAGqWA&key=AIzaSyCNCZ0Twm_HFRaZ5i-FuPDYs3rLwm4_848"> 
    </amp-iframe>

Quelle

2016-03-27 00:51:51

Dies erfordert eine Orts-ID. Auf der Suche nach einem koordinierten Ansatz, der Marker enthält. – Du3

Der Trick, um den „Ansicht“ Modus nicht verwenden, sondern vielmehr der „Ort“ -Modus. Mit dem Ortsmodus brauchen Sie keine Ortskennung, Sie können einfach Koordinaten verwenden. Als Beispiel:

<amp-iframe 
    width="600" 
    height="400" 
    layout="responsive" 
    sandbox="allow-scripts allow-same-origin allow-popups" 
    frameborder="0" 
    src="https://www.google.com/maps/embed/v1/place?key=<key>&q="44.0,122.0"> 
</amp-iframe>

Als zusätzliche Anmerkung, wenn Sie diese mit AMP verwenden, empfehle ich Ihnen ein Platzhalter Bild umfassen, falls die iframe zum Seitenanfang zu nahe sind (eine AMP-Regel). In diesem Fall könnte ich eine <amp-img>, wie so verwenden:

<amp-img 
    src="https://maps.googleapis.com/maps/api/staticmap?key=<key>&center="44.0,122.0"&zoom="15"&size=600x400" 
    width="600" 
    height="400" 
    layout="responsive" 
    placeholder 
    />

innerhalb des iframe, so dass es das folgende Format hat:

<amp-iframe ... > 
    <amp-img .../> 
</amp-iframe>

Quelle

2017-02-05 22:34:43

Karte mit Marker auf der AMP-HTML-Seite einbinden

Antwort

Verwandte Themen