Usar un mapa de Google Maps como fondo de tu sitio web

1. Obtener una clave de Google Maps API

Antes que nada, lo primero que requerirás será una clave API para utilizar Google Maps para estos fines. Esto te llevará tan solo unos segundos, es instantáneo y es requerida una clave por dominio.

Haz clic en este enlace para obtener tu clave API de Google Maps >>

2. Configurar: HTML y CSS

Aquí puedes descargar el archivo CSS:

Haz clic en este enlace para descargar el archivo CSS >>

Y aquí puedes descargar el archivo HTML:

Haz clic aquí para descargar el archivo HTML >>

Finalmente, aquí tienes el archivo JavaScript:

Haz clic aquí para descargar el archivo JavaScript >>

Para que todo funcione correctamente, usaremos las propiedades absolute y z-index para poder alinear y posicionar todo en el orden correcto para completar la pantalla.

Como podrás ver, para obtener este efecto, le daremos al id map_ canvas que será el que generará el mapa) algunos parametros de estilo en forma inline, de esta manera:

PLAIN TEXT

1. id="map_canvas" style="position: absolute; top: 0; bottom: 0; left:
   0; right: 0; z-index: 0;">

Es importante que todas estas propiedades queden configuradas en cero, y es indispensable que este sea el último elemento que coloquemos antes de cerrar el tag body.

Para los otros elementos div en la página (como la cuenta regresiva, el texto, etc...) fue creado un divcontenedor (llamado #countdown_dashboard) al que le fue dada position : absolute y su z-index fue colocado en 100 (o más alto si quieres ¡Lo importante que es no sea cero!)

Fuente original del artículo: WadeHammes Traducción realizada por elWebmaster.com

Leia Mais…

Ads meet google maps with sponsored links

Google Maps official gets sponsored links in searchs. Wanna try ?

1. open google maps (maps.google.com)
2. Type: "NYC Apple Store" on search box
3. click search button

you'll get this map with an extra icon on it (the white one).

If you click on the white button, you can discover what i'm talking about ... the new sponsored links on google maps (see below).

Leia Mais…

JQuery on Blogger

I'm trying to create a blogger post that can process jquery code. Click on the button below to see a jquery dialog window with a google map on it.

You should see something like this:

Code here:

   1:  <!-- MAP -->

   2:  <link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/themes/base/jquery-ui.css">

   3:   

   4:  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js">

   5:  </script>

   6:   

   7:  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/lib/jqueryui/1.7.1/jquery-ui.min.js">

   8:  </script>

   9:   

  10:      <script type="text/javascript">

  11:      $(document).ready(function() {

  12:      var $dialog = $('#mapa')

  13:               .dialog({

  14:              autoOpen: false,

  15:              width: 690,

  16:              heigh:490,

  17:                          modal:true,

  18:          title: 'New York City Feelings :: FREE NYC: Arts, Museums ...'

  19:          });

  20:   

  21:          $('#opener').click(function() {

  22:              $dialog.dialog('open');

  23:          });

  24:      });

  25:  </script>

  26:  <div id="result"></div>

  27:  <center>

  28:  <button id="opener">Open Window Map</button></center>

  29:  <div style="display:none;" id="mapa" title="New York City Feelings :: FREE NYC: Arts, Museums ...">

  30:  <iframe width="640" height="420" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="foo.html">

  31:  </iframe>

  32:  </div>

  33:  <!-- // MAP -->

Leia Mais…

Colección de iconos para Google Maps

by alpoma

Map icons collection es un recurso que, según las explicaciones de sus promotores…

…es un conjunto de 600 iconos gratis para resaltar los puntos de interés en sus mapas. Usted puede poner manualmente con “Mis Mapas” de Google Maps, o automáticamente con la API de Google Maps. Organizado por categoría y el color, tenemos una colección completa de marcadores, como el cine, escuela, banco, restaurante, o tienda de ropa japonesa.

Ahora bien, se me ocurre que, habida cuenta de que incluye plantilla en formato PSD y la cantidad de iconos es realmente sorprendente, podrían usarse para otro tipo de mapas, no sólo en Google Maps. En fin, se utilice donde se quiera, no viene mal apuntarlo en el listado de recursos de utilidad.

Leia Mais…

Obtener Huso en Google Maps

cómo obtener el HUSO a partir de la latitud y longitud:

   1:  /* devuleve el HUSO */ 

   2:  function getHUSO(lat, lon){

   3:   var txtHuso = "S"; 

   4:  if(lat > 0){ 

   5:   txtHuso = "N" 

   6:    } 

   7:    for(var i = -30; i <> (i*6) && lon < (1+i)*6){ 

   8:     return "" + ((i+30)+1) +""+txtHuso; 

   9:    } 

  10:   } 

  11:  }

Leia Mais…

Google Maps: Iconos Personalizados

Trabajar con iconos propios sobre google maps 

   1:  var icon = new GIcon(); 

   2:  icon.image = "http://www.xyzt.com/planta30x30.png"; 

   3:  icon.iconAnchor = new GPoint(16, 16); 

   4:  icon.infoWindowAnchor = new GPoint(16, 0); 

   5:  icon.iconSize = new GSize(24, 24);

Leia Mais…

Google Maps - Inicios

¿Cómo crear una simple mapa con Google Maps API? En primer lugar tenemos que solicitar una KEY para usar la API de google maps. Aqui: http://code.google.com/intl/es-ES/apis/maps/signup.html Añadimos la KEY al código:

<script src="http://maps.google.com/maps?file=api&v=2&
sensor=true_or_false&
key=ABQIAAAA-dCOIe9wvCndq8kKZDklJRQhL6vn9PNcXa7eSPja3EjRwozD8hTXU
IiDBDVfDdeo3YIkjZk4-07sFA" 
type="text/javascript"></script>

Creamos el mapa:

Leia Mais…