GMapz   Yet another Google Maps library. https://github.com/carloscabo/gmapz

<input id="my-autocomplete-4A" placeholder="Introduce una dirección...">

map_sample_4A = new GMapz.map($('#map-sample-4A'));
 
map_sample_4A.onReady = function() {
  this.addLocations(italy_cities).fitBounds();
}
 
autocomplete_4A = new GMapz.autocomplete($('#my-autocomplete-4A'));
 
autocomplete_4A.onChange = function () {
  // this = autocomplete
  var place = this.instance.getPlace();
  if(typeof place.geometry === 'undefined') {
    // No se ha encontrado el lugar
    alert('No encontrado');
    return;
  }
  // Mostramos la ubicación y elpuntero más cercano
  map_sample_4A.geoShowPosition(place);
};

Autocompletado de localizaciones de Google
Para esta funcionalidad necesitamos incluír gmapz.autocomplete.js e inicializar un input de la página.

El elemento autocomplete tiene sus propios eventos que podemos emplear para interactuar con los mapas, o para realizar otras funciones con ellos.

<input id="my-autocomplete-4B" placeholder="Introduce una dirección...">

// Creamos un mapa con un centro y un zoom
map_sample_4B = new GMapz.map(
  $('#map-sample-4B'), {
    center: [41.8919, 12.5113], // Roma
    zoom: 12
  }
);
 
// Creamos en autocomplete asignado a un elemento de la página
autocomplete_4B = new GMapz.autocomplete($('#my-autocomplete'));
 
// Cuando el usuario introduce una dirección...
autocomplete_4B.onChange = function () {
  // this = autocomplete
  var
    place = this.instance.getPlace(),
    pos = {};
 
  if(typeof place.geometry === 'undefined') {
    alert('No encontrado');
    return;
  }
 
  // Creamos un marker
  pos['autocomplete'] = {
    pin: 'autocomplete',
    lat: place.geometry.location.lat(),
    lng: place.geometry.location.lng(),
    draggable: true,
    iw : 'My infowindow 1'
  };
  // Añadimos la nueva localización
  // Centramos la vista en la nueva localización
  // Abrimos el infowindow de la misma
  map_sample_4B.addLocations(pos).fitToPlace(place,18).openInfoWindow('autocomplete');
};

Mostar el marcador más cercano al usuario

Encontrar marcador más cercano

Para esta funcionalidad basta crear un elemento html con un data-attribute data-gmapz-target="..." y otro data-gmapz-find-near.

<a href="#" data-gmapz-target="gz-sample-4C" data-gmapz-find-near >Encontrar marcador más cercano</a>

El pin que se emplea para definir la ubicación actual del usuario se define en gmapz.pins.js con la clave espacial: user_location. A continuación el js necesario para esta demo...

// Start gmapz with default options
var map_sample_4C = new GMapz.map(
  $('[data-gmapz="gz-sample-4C"]')
);
 
// onReady add locations and fit bounds
map_sample_4C.onReady = function() {
  this.addLocations(spain_locs).fitBounds();
};
 
// Automatically attach button with data-gmapz attribute
GMapz.attachActionButtons();

Input para introducción de texto
Para esta funcionalidad debemos crear un inputcode> donde el usuario pueda introducir la dirección a buscar, y un button con 3 data-attributes:

1. data-gmapz-target="data_gmapz_del_mapa" con el data-gmapz de destino donde se mostrará el resultado.

2. data-gmapz-input="selector_de_input" selector que nos indica de que input se leerá la dirección que introducido el usuario.

3.data-gmapz-find-near-address que activa la funcionalidad de búsqueda.

<input id="my-address" placeholder="Cerca de dirección...">
 
<button data-gmapz-target="gz-sample-4D" data-gmapz-input="#my-address" data-gmapz-find-near-address>Buscar!</button>

El pin que se emplea para definir la ubicación actual del usuario se define en gmapz.pins.js con la clave espacial: user_location. A continuación el js necesario para esta demo...

var map_sample_4D = new GMapz.map(
  $('[data-gmapz="gz-sample-7"]')
);
 
map_sample_4D.onReady = function() {
  this.addLocations(spain_locs).fitBounds();
};
 
map_sample_4D.errorAddressNotFound = function(addr) {
  console.log('Was unable to find: '+addr);
};