Agregar mapa a proyecto web con JQuery Location Picker y Bootstrap

Agregar mapa a proyecto web con JQuery Location Picker y Bootstrap, este plugin permite encontrar y seleccionar fácilmente una ubicación en el mapa de Google,  permite elegir un área proporcionando su centro y el radio.

Todos los datos se pueden guardar en cualquier elemento de entrada de HTML automáticamente, así como ser procesados ​​por Javascript (soporte de devolución de llamada).

La otra característica del plug-in es la resolución automática de direcciones que permite obtener la línea de dirección desde la latitud y la longitud seleccionadas, agregando un buscador que permite esta localización “autocompletar de la API de Google”.

Para ver más sobre este plugin te dejamos el enlace del autor: http://logicify.github.io/jquery-locationpicker-plugin/ 
El plug-in actualmente utiliza JQuery y Google Maps y para implementar este plugin solo necesitamos modificar algunos aspectos del plugin (en este caso ponerlo como un modal), vamos a hacerlo.

1.- Incluir los scripts que permiten crear el modal y trabajar de forma rápida con el plugin, como es el caso de jQuery

<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css"/>
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap-theme.min.css"/>
<script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>

2.-  Incluiremos el plugin y el enlace de google que recibe con parámetros la api key de google api

<script type="text/javascript" src='https://maps.google.com/maps/api/js?sensor=false&libraries=places&key=API_KEY'></script>
<script src="locationpicker.jquery.min.js"></script>

3.- Agregar el código del modal para bootstrap (Incluiremos código ya implementado y que no esta incluido en la documentación).

<div class="modal fade" id="ModalMap" tabindex="-1" role="dialog" >
<style>.pac-container { z-index: 99999; }</style>
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-body">
<div class="form-horizontal">
<div class="form-group">
<label class="col-sm-2 control-label">Ubicación:</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="ModalMap-address" />
</div>
<div class="col-sm-1">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
</div>
</div>
<div id="ModalMapPreview" style="width: 100%; height: 400px;"></div>
<div class="clearfix">&nbsp;</div>
<div class="m-t-small">
<label class="p-r-small col-sm-1 control-label">Lat.:</label>
<div class="col-sm-3">
<input type="text" class="form-control" id="ModalMap-lat" />
</div>
<label class="p-r-small col-sm-2 control-label">Long.:</label>

<div class="col-sm-3">
<input type="text" class="form-control" id="ModalMap-lon" />
</div>
<div class="col-sm-3">
<button type="button" class="btn btn-primary btn-block" data-dismiss="modal" >Aceptar</button>
</div>

</div>
<div class="clearfix"></div>
<script>
$('#ModalMapPreview').locationpicker({
radius: 0,
location: {
latitude: 20.938297181414647,
longitude: -89.61501516379462
},
inputBinding: {
latitudeInput: $('#ModalMap-lat'),
longitudeInput: $('#ModalMap-lon'),
locationNameInput: $('#ModalMap-address')
},
enableAutocomplete: true,
onchanged: function (currentLocation, radius, isMarkerDropped) {
$('#ubicacion').html($('#ModalMap-address').val());
}
});
$('#ModalMap').on('shown.bs.modal', function () {
$('#ModalMapPreview').locationpicker('autosize');
});
</script>
</div>
</div>
</div>
</div>

4.- Incluiremos el código del botón que activa el modal (puedes poner el botón donde gustes).

<button type="button" data-toggle="modal" data-target="#ModalMap" class="btn btn-default">
<span class="glyphicon glyphicon-map-marker"></span> <span id="ubicacion">Seleccionar Ubicación:</span>
</button>

The post Agregar mapa a proyecto web con JQuery Location Picker y Bootstrap appeared first on Develoteca.