gMaps jquery para GoogleMaps

gMap es un plugin de jQuery ligero que ayuda a integrar Google Maps en tu sitio web. Con sólo 2 KB de tamaño es muy flexible y altamente personalizable.

Una linea de codigo :D facil no?

 $('#map1').gMap();

Empecemos! :D

En la cabecera del documento necesitas tener:

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.1.min.js"></script>
<script type="text/javascript" src="jquery.gmap.js"></script>

Ejemplo 1:

Mapa por defecto:

Codigo:

 $('#map1').gMap();

Css

.map{
  width: 547px; 
  height: 320px; 
  border: 1px solid rgb(119, 119, 119); 
  overflow: hidden; 
  position: relative; 
  background-color: rgb(229, 227, 223); 
  }

Html:

<div id="map1" class="map">

Ejemplo 2:

Personalizar controles y tipo de mapa:

 Codigo:

$('#map2').gMap({
     latitude: -2.206,
     longitude: -79.897,
     maptype: 'TERRAIN',
     zoom: 8,
     controls: {
     panControl: true,
     zoomControl: false,
     mapTypeControl: true,
     scaleControl: false,
     streetViewControl: false,
     overviewMapControl: false
     }
   });

maptype: 'TERRAIN', // 'HYBRID', 'SATELLITE', 'ROADMAP' or 'TERRAIN'

Css

.map{
  width: 547px; 
  height: 320px; 
  border: 1px solid rgb(119, 119, 119); 
  overflow: hidden; 
  position: relative; 
  background-color: rgb(229, 227, 223); 
  }

Html:

<div id="map2" class="map">

Ejemplo 3:

Mapa con marcadores

 Codigo:

$('#map3').gMap({
address: "Quito, Ecuador",
        zoom: 5,
  markers:[
   {
    latitude: -2.2014,
    longitude: -80.9763,
    html: "_latlng"
   },
   {
    address: "Guayaquil, Ecuador",
    html: "My Hometown",
    popup: true
   },
   {
    address: "Galapagos, Ecuador",
    html: "_address"
   }
  ]

    });

Css

.map{
  width: 547px; 
  height: 320px; 
  border: 1px solid rgb(119, 119, 119); 
  overflow: hidden; 
  position: relative; 
  background-color: rgb(229, 227, 223); 
  }

Html:

<div id="map3" class="map">

Ejemplo 4:

Uso extendido:


 Codigo:

$("#map4").gMap({
controls: false,
 scrollwheel: true,
 maptype: 'TERRAIN',
 markers: [
  {
   latitude: 47.670553,
   longitude: 9.588479,
   icon: {
    image: "images/gmap_pin_orange.png",
    iconsize: [26, 46],
    iconanchor: [12,46]
   }
  },
        {
   latitude: 47.65197522925437,
   longitude: 9.47845458984375
  },
  {
   latitude: 47.594996,
   longitude: 9.600708,
   icon: {
    image: "images/gmap_pin_grey.png",
    iconsize: [26, 46],
    iconanchor: [12,46]
   }
  }
 ],
 icon: {
  image: "images/gmap_pin.png", 
  iconsize: [26, 46],
  iconanchor: [12, 46]
 },
 latitude: 47.58969,
 longitude: 9.473413,
 zoom: 10
});

Css

.map{
  width: 547px; 
  height: 320px; 
  border: 1px solid rgb(119, 119, 119); 
  overflow: hidden; 
  position: relative; 
  background-color: rgb(229, 227, 223); 
  }

Html:

<div id="map4" class="map">

Si quieren descargar un ejemplo hagan clic "AQUI"