Incorpora mappa con indicatore nella pagina HTML AMP

Attualmente utilizzo l'API di Google Maps per generare una mappa con un indicatore (dato un insieme di coordinate lat/long) in una determinata posizione. In AMP HTML, sembra che il modo per farlo attualmente stia utilizzando l'estensione amp-iframe https://github.com/ampproject/amphtml/tree/master/extensions. Il problema è che non è possibile utilizzare il codice di incorporamento di Google Maps con le coordinate a meno che non si stia utilizzando una mappa di "visualizzazione". Non ho un ID luogo, quindi non posso usare la modalità Luogo. Non posso usare la modalità 'Visualizza', poiché non ha marcatori. Ho guardato in alto e in basso a https://developers.google.com/maps/documentation/embed/guide#overview Incorpora mappa con indicatore nella pagina HTML AMP

Qual è il modo corretto di includere una mappa di Google in una pagina HTML AMP su cui è posizionato un indicatore? Non vedo alcuna domanda su questo argomento nel forum o nei problemi di Github, quindi sono curioso di sapere se qualcun altro si è imbattuto in questo stesso scenario.

fonte

2016-03-21 Du3

Si trova proprio nel * "sembra il modo di fare questo attualmente sta usando l'estensione amp-iframe "*. Le mappe funzionano con 'amp-iframe', le mappe statiche dovrebbero funzionare alla grande con' amp-img' e 'amp-click-to-play' dovrebbe farle funzionare molto bene insieme. Penso che Maps with Markers non sia ancora supportato in Amp HTML a meno che tu non stia usando una mappa 'view'. Controlla questo [esempio] (https://github.com/ampproject/amphtml/blob/master/examples/released.amp.html). – abielita

Si prega di fornire un Gist o JSFiddle che mostri l'embed di Maps preferenziale. Scopriremo una soluzione basata su questo. Inoltre hai visto questo esempio: https://ampbyexample.com/components/amp-iframe/#example11 – ade

entrambi i tuoi esempi richiedono un luogo id, che non ho. Ho solo le coordinate. Voglio far cadere i marcatori. Attualmente devi farlo con Javascript con l'API di Google Maps. Se AMP HTML deve avere rich snippet per sostituire il javascript dietro le quinte, sembra che l'unico modo per ottenerlo sia la ricerca dell'ID posto dalle coordinate lato server con l'API di Google Maps, e quindi posso utilizzare il PlaceID. La domanda qui - c'è un altro modo per gestire questo scenario senza cercare un lato del server ID luogo. Le mappe tramite coordinate e indicatori sono molto comuni. – Du3

Ho trovato questo codice sul proprio repository GitHub 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>

fonte

2016-03-27 00:51:51

Ciò richiede un luogo id. Alla ricerca di un approccio basato coordinato che includa i marcatori. – Du3

Il trucco è di non usare la modalità "vista", ma piuttosto il modo di "luogo". Con la modalità luogo, non è necessario un ID di luogo, è sufficiente utilizzare le coordinate. Per fare un esempio:

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

Come nota aggiuntiva, se si utilizza questo con AMP, vi consiglio di includere un'immagine segnaposto nel caso in cui l'iframe è troppo vicino alla parte superiore della pagina (una regola di AMP). In quel caso, avrei potuto usare un <amp-img>, in questo modo:

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

all'interno del iframe, in modo che ha il seguente formato:

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

fonte

2017-02-05 22:34:43

Incorpora mappa con indicatore nella pagina HTML AMP

risposta

Problemi correlati