Skip to content

Instantly share code, notes, and snippets.

@donpandix
Last active July 23, 2018 22:09
Show Gist options
  • Save donpandix/42b686ae210016ef0431e7cdbc428aa1 to your computer and use it in GitHub Desktop.
Save donpandix/42b686ae210016ef0431e7cdbc428aa1 to your computer and use it in GitHub Desktop.
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