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.
| <!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; | |
| } |