Plano Google (Maps) como fondo (muy chulo)

[rhdpre]

Hola,

Ayer ví, por primera vez y me parecio "muy chulo) que una página tenían como fondo de página un "google maps" (imagino que es una de sus apis?

¿Alguien sabe cómo se hace?

Imagino que no será algo tan sencillo como insertar el típico mapa de situación insertando el código que te da google en su google maps...
[URL="http://www.asadoretxebarri.com/es/contacto"]http://www.asadoretxebarri.com/es/contacto[/URL]

[PHPeros]

Aquí tienes los pasos para hacerlo. Sí que es una API.

[rhdpre]

Iniciado por PHPeros

[Url=http://www.thechrisoshow.com/2013/05/07/use-a-google-map-as-the-background-of-your-webpage/]Aquí[/url] tienes los pasos para hacerlo. Sí que es una API.

Muchas Gracias...

Le he pregunatdo al de la pagina porque me da error: google ha inhabilitado api. Clave api no válida

[PHPeros]

Claro, tienes que obtenerla desde google code y después añadirla al parámetro "key".

[rhdpre]

Iniciado por PHPeros

Claro, tienes que [url=https://developers.google.com/maps/documentation/javascript/tutorial]obtenerla[/url] desde google code y después añadirla al parámetro "key".

Sí, lo he sospechado y me he ido a lo de las apis de google...pero no tengo muy claro cual es la key. veo estos datos

(tampoco tengo claro haber ido a donde debia)

EDITO: Ya he encontrado la api....

Sorry y gracias

[PHPeros]

Ahhhhhh... ya te iba a decir

PD: No hace falta que te bajes la API, la tienes libre, solo tienes que pasar ?key={tu clave}

[rhdpre]

Gracias por tu atención phpperos:

Como veras estoy en pañales....

No tengo muy claro que tengo que hacer con el Javascript....¿ponerlo en el body (con la etiqueta script?)...crear un js...?:

$(document).ready(function() {
var mapOptions = {
zoom: 8,
center: new google.maps.LatLng(-34.397, 150.644),
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
}

[PHPeros]

Ponlo en el head (aunque da un poco igual), pero después del <script> que linkea a la API, con su respectiva key especificada en la url.

[rhdpre]

Iniciado por PHPeros

Ponlo en el head (aunque da un poco igual), pero después del <script> que linkea a la API, con su respectiva key especificada en la url.

Para serte sincero (nunca tengo claro si estoy haciendo una burrada), había probado poniendolo en el head, body, incluso en los dos......pero no me ha funcionado (con etiqueta <script> y </script>)

A ver si el problema esta aqui: tengo dudas con estas dos líneas:

<link href="/test/application.css" media="screen" rel="stylesheet" type="text/css" />

<script src="/test/application.js" type="text/javascript"></script>


Una llama a un css, y otra a un js....¿no?

que en mi caso no tengo (ni una ni otra) y no sé a qué hacen referencia....ni de donde salen....(si hubiera un emoticone coon orejas de burro, me lo coronaría)

[PHPeros]

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=tu_clave&sensor=false">

https://developers.google.com/maps/d...cript/tutorial

[rhdpre]

Iniciado por PHPeros

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=tu_clave&sensor=false">

[url]https://developers.google.com/maps/documentation/javascript/tutorial[/url]

Muchas gracias...
Ok, ya he conseguido que se vea el mapa....

¿sabrías decirme porque el plano me sale por encima del resto del contenido?

La única línea del Body la tengo al final ( <div id="map-canvas"/>
)

Qué debería añadir a style para forzar que se vaya a background:

<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#map-canvas { height: 100% }
</style>


Como ya imaginaras de código no tengo ni pijotera idea; cuando necesito algún css o php, investigo y casi nunca se me resistenpero esto se me resiste.

Y para que te hagas una idea, tampoco uso DW, uso uno que viene a ser como un Photosop que me genera todo el código html; todo lo demás lo tengo que "picar"

por si quieres ver el código:

[URL="http://www.neoclick.es/cokote"]http://www.neoclick.es/cokote[/URL]

[PHPeros]

Ahora sólo te queda lo fácil... ¿Has probado a poner el div en el principo del documento?

[rhdpre]

Iniciado por PHPeros

Ahora sólo te queda lo fácil... ¿Has probado a poner el div en el principo del documento?

El Problema es el programo que uso...que es como un fotoshop y la dínámica es muy distinta....puedo "poner código en el body o en el head, pero no contrólo su posición..

Y la única solución que veo es vía añadir al propio style de la "api google" algún párametro que lo lleve al backgraund (no sé ni si existe alguna clase de este tipo)

de nuevo gracias.

[PHPeros]

Ok, te doy el CSS pero el tema ya no da más de sí...

Código CSS:

#map-canvas{
position: relative;
z-index: -999;
}
 

Si no funciona lo siento

[rhdpre]

Iniciado por PHPeros

Ok, te doy el CSS pero el tema ya no da más de sí...

Código CSS:

#map-canvas{
position: relative;
z-index: -999;
}
 

Si no funciona lo siento

Sí estoy de acuerdo; lo intentaré en soporte de google.

Tu código, efectivamente a mandado el plano al fondo, pero "lo paraliza"; no interactua, ni se mueve...


Muchas gracias por tu ayuda.