autocompletado – ProgramaciónExtrema.com https://programacionextrema.com Tutoriales de programación! Thu, 15 Oct 2015 01:08:25 +0000 es hourly 1 https://wordpress.org/?v=5.6.16 https://programacionextrema.com/wp-content/uploads/2015/10/cropped-icon-programacion-extrema-32x32.png autocompletado – ProgramaciónExtrema.com https://programacionextrema.com 32 32 Autocompletado de Google Maps (API) https://programacionextrema.com/2015/10/15/autocompletado-de-google-maps-api/ https://programacionextrema.com/2015/10/15/autocompletado-de-google-maps-api/#respond Thu, 15 Oct 2015 00:55:17 +0000 http://programacionextrema.com/?p=113 La API de Google Maps es una de la más utilizadas en el mundo del desarrollo de software. Nos permite obtener información muy valiosa de distintos lugares del mundo. Como por ejemplo ciudades, puntos de coordenadas, establecimientos, hoteles, etc. Debido a que cada día son más las aplicaciones que utilizan esta API, en este artículo… Read More

La entrada Autocompletado de Google Maps (API) aparece primero en ProgramaciónExtrema.com.

]]> La API de Google Maps es una de la más utilizadas en el mundo del desarrollo de software. Nos permite obtener información muy valiosa de distintos lugares del mundo. Como por ejemplo ciudades, puntos de coordenadas, establecimientos, hoteles, etc.

Debido a que cada día son más las aplicaciones que utilizan esta API, en este artículo vamos a ver como utilizarla para realizar el autocompletado de Google Maps de ciudades, direcciones y establecimientos con un ejemplo bastante sencillo.

Ejemplo de autocompletado de direcciones con la API de Google Maps y Java Script

<!DOCTYPE html>
<html>

<head>
    <title>Place Autocomplete</title>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <style>
        html,
        body {
            height: 100%;
            margin: 0;
            padding: 0;
        }
        
        #map {
            height: 100%;
        }
        
        .controls {
            margin-top: 10px;
            border: 1px solid transparent;
            border-radius: 2px 0 0 2px;
            box-sizing: border-box;
            -moz-box-sizing: border-box;
            height: 32px;
            outline: none;
            box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
        }
        
        #pac-input {
            background-color: #fff;
            font-family: Roboto;
            font-size: 15px;
            font-weight: 300;
            margin-left: 12px;
            padding: 0 11px 0 13px;
            text-overflow: ellipsis;
            width: 300px;
        }
        
        #pac-input:focus {
            border-color: #4d90fe;
        }
        
        .pac-container {
            font-family: Roboto;
        }
        
        #type-selector {
            color: #fff;
            background-color: #4d90fe;
            padding: 5px 11px 0px 11px;
        }
        
        #type-selector label {
            font-family: Roboto;
            font-size: 13px;
            font-weight: 300;
        }
    </style>
</head>

<body>
    <input id="pac-input" class="controls" type="text" placeholder="Ingresar ubicación">
    <div id="type-selector" class="controls">
        <input type="radio" name="type" id="changetype-all" checked="checked">
        <label for="changetype-all">Todos</label>

        <input type="radio" name="type" id="changetype-establishment">
        <label for="changetype-establishment">Establecimientos</label>

        <input type="radio" name="type" id="changetype-address">
        <label for="changetype-address">Direcciones</label>

        <input type="radio" name="type" id="changetype-geocode">
        <label for="changetype-geocode">Codificación Geográfica</label>
    </div>
    <div id="map"></div>

    <script>
        function initMap() {
            var map = new google.maps.Map(document.getElementById('map'), {
                center: {
                    lat: -33.8688,
                    lng: 151.2195
                },
                zoom: 13
            });
            var input = /** @type {!HTMLInputElement} */ (
                document.getElementById('pac-input'));

            var types = document.getElementById('type-selector');
            map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);
            map.controls[google.maps.ControlPosition.TOP_LEFT].push(types);

            var autocomplete = new google.maps.places.Autocomplete(input);
            autocomplete.bindTo('bounds', map);

            var infowindow = new google.maps.InfoWindow();
            var marker = new google.maps.Marker({
                map: map,
                anchorPoint: new google.maps.Point(0, -29)
            });

            autocomplete.addListener('place_changed', function() {
                infowindow.close();
                marker.setVisible(false);
                var place = autocomplete.getPlace();
                if (!place.geometry) {
                    window.alert("Autocomplete's returned place contains no geometry");
                    return;
                }

                // Si el lugar tiene una geometría, luego lo presentan en un mapa.
                if (place.geometry.viewport) {
                    map.fitBounds(place.geometry.viewport);
                } else {
                    map.setCenter(place.geometry.location);
                    map.setZoom(17); // ¿Por qué 17 ? Porque se ve bien.
                }
                marker.setIcon( /** @type {google.maps.Icon} */ ({
                    url: place.icon,
                    size: new google.maps.Size(71, 71),
                    origin: new google.maps.Point(0, 0),
                    anchor: new google.maps.Point(17, 34),
                    scaledSize: new google.maps.Size(35, 35)
                }));
                marker.setPosition(place.geometry.location);
                marker.setVisible(true);

                var address = '';
                if (place.address_components) {
                    address = [
                        (place.address_components[0] && place.address_components[0].short_name || ''), (place.address_components[1] && place.address_components[1].short_name || ''), (place.address_components[2] && place.address_components[2].short_name || '')
                    ].join(' ');
                }

                infowindow.setContent('<div><strong>' + place.name + '</strong><br>' + address);
                infowindow.open(map, marker);
            });

            // Establece un event en un radio button para cambiar el tipo de filtro en lugares
            // Autocompletado.
            function setupClickListener(id, types) {
                var radioButton = document.getElementById(id);
                radioButton.addEventListener('click', function() {
                    autocomplete.setTypes(types);
                });
            }

            setupClickListener('changetype-all', []);
            setupClickListener('changetype-address', ['address']);
            setupClickListener('changetype-establishment', ['establishment']);
            setupClickListener('changetype-geocode', ['geocode']);
        }
    </script>
    <script src="https://maps.googleapis.com/maps/api/js?sensor=false&signed_in=true&libraries=places&callback=initMap" async defer></script>
</body>

</html>

El código fuente lo pueden encontrar en la página oficial de google https://developers.google.com/maps/documentation/javascript/examples/places-autocomplete con algunos ligeros cambios. Ante cualquier problema no duden en dejar un comentario.

La entrada Autocompletado de Google Maps (API) aparece primero en ProgramaciónExtrema.com.

]]> https://programacionextrema.com/2015/10/15/autocompletado-de-google-maps-api/feed/ 0