Create a gist now

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Google Maps retorno de búsqueda

Google Maps retorno de búsqueda

Implementación simple de la librería para el uso de Google Maps, la implementación busca la ubicación geográfica a partir de una dirección. adicionalmente hay una implementación para que gatille la búsqueda de la información después de 1 segundo de detener la escritura.

A Pen by Cesar Gonzalez on CodePen.

License.

<!DOCTYPE html>
<html>
<head>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" />
<link href="http://fonts.googleapis.com/css?family=Open+Sans:400,300,700" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<link href="style.css" rel="stylesheet" />
</head>
<body>
<header>
<h1>GOOGLE MAPS</h1>
<p>Retorno de información de una dirección</p>
</header>
<content>
<div class="row">
<div class="col-md-10 col-md-offset-1">
<input type="text" class="form-control" id="direccion" value="" placeholder="Mapa">
</div>
</div><br>
<div class="row">
<div class="col-md-10 col-md-offset-1">
<div class="panel panel-default">
<div class="panel-heading">Panel de información</div>
<div class="panel-body" id="maps"></div>
</div>
</div>
</div><br>
<div class="row">
<div class="col-md-10 col-md-offset-1">
<div class="panel panel-default">
<div class="panel-heading">Panel de información</div>
<div class="panel-body console_panel_content" id="log"></div>
</div>
</div>
</div>
</content>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=GOOGLEMAP_PUBLIC_API_KEY"></script>
<script src="script.js"></script>
</body>
<html>
var MODULO = MODULO || {};
MODULO.timer = null;
MODULO.init = function () {
$("#direccion").keypress( MODULO.keyup_delay );
MODULO.googleMap.init();
}
MODULO.keyup_delay = function () {
clearTimeout( MODULO.timer );
MODULO.timer= setTimeout( function(){
MODULO.googleMap.updateAddress( $('#direccion').val() );
}, 1000);
}
MODULO.googleMap = {};
MODULO.googleMap.map = null;
MODULO.googleMap.coord = { lat: -33.0137926, lng: -71.5189799};
MODULO.googleMap.markers = [];
MODULO.googleMap.updateAddress = function ( address ) {
var geocoder = new google.maps.Geocoder();
geocoder.geocode( { 'address': address }, function ( results, status ) {
$("#log").html("");
if (status == google.maps.GeocoderStatus.OK) {
var retorno_google = results[0];
$("#latitud").val( retorno_google.geometry.location.lat() );
$("#longitud").val( retorno_google.geometry.location.lng() );
for ( item in retorno_google.address_components ) {
var direccion = retorno_google.address_components[item];
$("#log").append(direccion.types[0] + " : " + direccion.long_name + "<br>");
}
$("#log").append("Latitud : " + retorno_google.geometry.location.lat() + "<br>");
$("#log").append("Longitud : " + retorno_google.geometry.location.lng() + "<br>");
MODULO.googleMap.coord.lat = retorno_google.geometry.location.lat();
MODULO.googleMap.coord.lng = retorno_google.geometry.location.lng();
MODULO.googleMap.map.setCenter( MODULO.googleMap.coord );
MODULO.googleMap.addMarker();
}
});
}
MODULO.googleMap.addMarker = function () {
// Limpia los marcadores
for (var i=0; i<MODULO.googleMap.markers.length; i++) {
MODULO.googleMap.markers[i].setMap(null);
}
MODULO.googleMap.markers = [];
var marker = new google.maps.Marker({
position : MODULO.googleMap.coord,
map: MODULO.googleMap.map
});
MODULO.googleMap.markers.push(marker);
}
MODULO.googleMap.init = function () {
MODULO.googleMap.map = new google.maps.Map(document.getElementById('maps'), {
center: MODULO.googleMap.coord,
zoom: 15,
mapTypeId: google.maps.MapTypeId.TERRAIN
});
MODULO.googleMap.addMarker();
}
$("document").ready( MODULO.init );
html, body {
font-size: 12px;
background: #e5ebf4;
font-family: 'Open Sans', sans-serif !important;
}
body {margin:0;}
h1 {
position:relative;
margin:0px auto;
width:auto;
padding-bottom:0px;
font-size:4.1rem;
font-weight:300;
letter-spacing: -0.15rem;
color:#FFF
}
header {
background:#2b303b;
text-align:center;
padding:10px;
margin-bottom: 20px;
}
header p {color:#96b5b4;}
.console_panel_content {
height: 180px;
overflow: auto;
}
#maps {
height: 360px;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment