Mostrar lugares y Servicios públicos consumiendo Google Places API

3 minuto(s)

En esta página:

Demo Github

Demo Github

Google nos proporciona muchas APIS para trabajar con facilidad, una de ellas es Google Places API. Esta API es muy conocida por localizar lugares y servicios públicos como restaurantes, cajeros, museos, bares, etc. Esta API es usada en aplicaciones móviles y desktops para aplicaciones muy conocidas como Waze, Uber, etc. en conjunto con Google Maps nos ofrecen una basta información para cuando estemos perdidos en la calle y que junto a la Geolocalización que es el sistema que detecta nuestra ubicación, nos arroja resultados de los lugares mas cercanos a nuestro alrededor.

Vamos a mostrar un ejemplo para ver el potencial de Places. Vamos a detectar nuestra ubicación y mostraremos los servicios y lugares públicos aledaños.

Lógicamente primero tenemos que instanciar la API de Google Places con nuestra API KEY o Token de Autenticación:


<script src="https://maps.googleapis.com/maps/api/js?key=MIAPIKEYACA&libraries=places&callback=initMap" async defer></script>

Bueno primero declaro mi función initMap:


function initMap()

function initMap()

Ahora le decimos que use la Geolocalización para mostrar mi ubicación en el navegador, si geolocaliza que muestre mi ubicación en el mapa con los lugares (places) en un radio de 500 a la redonda desde mi ubicación:


if (navigator.geolocation) { //Geolocalizar
 navigator.geolocation.getCurrentPosition(function(position) {

 pos = {
 lat: position.coords.latitude/*-12.0872261*/,
 lng: position.coords.longitude/*-77.0029128*/
 }
 map = new google.maps.Map(document.getElementById('map'), {
 center: myLocation,
 zoom: 17
 });

 infoWindow = new google.maps.InfoWindow({
 map: map
 });

 infoWindow.setPosition(pos);
 infoWindow.setContent('Mi ubicación.');
 map.setCenter(pos);
 var myLocation = pos;

 var service = new google.maps.places.PlacesService(map);
 service.nearbySearch({
 location: myLocation,
 radius: 500, /* Que detecte los lugares en un Radio de 500 metros a la redonda */
 types: ['atm']
 }, callback);
 })
 };

if (navigator.geolocation) { //Geolocalizar

navigator.geolocation.getCurrentPosition(function(position) {

pos = {

lat: position.coords.latitude/*-12.0872261*/,

lng: position.coords.longitude/*-77.0029128*/

}

map = new google.maps.Map(document.getElementById('map'), {

center: myLocation,

zoom: 17

});

infoWindow = new google.maps.InfoWindow({

map: map

});

infoWindow.setPosition(pos);

infoWindow.setContent('Mi ubicación.');

map.setCenter(pos);

var myLocation = pos;

var service = new google.maps.places.PlacesService(map);

service.nearbySearch({

location: myLocation,

radius: 500, /* Que detecte los lugares en un Radio de 500 metros a la redonda */

types: ['atm']

}, callback);

})

};

Ahora validamos la conexión con el servicio de Google Maps API Place:


function callback(results, status) {
 if (status === google.maps.places.PlacesServiceStatus.OK) {
 for (var i = 0; i < results.length; i++) {
 createMarker(results[i]);
 }
 }
}

function callback(results, status) {

if (status === google.maps.places.PlacesServiceStatus.OK) {

for (var i = 0; i < results.length; i++) {

createMarker(results[i]);

}

Creamos los iconos de los establecimientos o lugares (places) públicos y el icono de mi ubicación (Geolocalización):


function createMarker(place) {
 var placeLoc = place.geometry.location;
 if (place.icon) {
 var image = new google.maps.MarkerImage(
 place.icon, new google.maps.Size(71, 71),
 new google.maps.Point(0, 0), new google.maps.Point(17, 34),
 new google.maps.Size(25, 25));
 } else var image = null;

 var marker = new google.maps.Marker({
 map: map,
 icon: image,
 position: place.geometry.location
 });

 service = new google.maps.places.PlacesService(map);

 var request = {
 reference: place.reference
 };

 google.maps.event.addListener(marker,'click',function(){
 service.getDetails(request, function(place, status) {
 if (status == google.maps.places.PlacesServiceStatus.OK) {
 var contentStr = '<h5><strong>'+place.name+'</strong></h5><p>'+place.formatted_address;
 if (!!place.formatted_phone_number) contentStr += '<br>'+place.formatted_phone_number;
 if (!!place.website) contentStr += '<br><a target="_blank" href="'+place.website+'">'+place.website+'</a>';
 /* contentStr += '<br>'+place.types+'</p>'; */
 contentStr += '<br>ID: '+place.place_id+'</p>';
 infowindow.setContent(contentStr);
 infowindow.open(map,marker);
 } else { 
 var contentStr = "<h5>No Hubo Resultados, status="+status+"</h5>";
 infowindow.setContent(contentStr);
 infowindow.open(map,marker);
 }
 });
 });
 }

function createMarker(place) {

var placeLoc = place.geometry.location;

if (place.icon) {

var image = new google.maps.MarkerImage(

place.icon, new google.maps.Size(71, 71),

new google.maps.Point(0, 0), new google.maps.Point(17, 34),

new google.maps.Size(25, 25));

} else var image = null;

var marker = new google.maps.Marker({

map: map,

icon: image,

position: place.geometry.location

});

service = new google.maps.places.PlacesService(map);

var request = {

reference: place.reference

};

google.maps.event.addListener(marker,'click',function(){

service.getDetails(request, function(place, status) {

if (status == google.maps.places.PlacesServiceStatus.OK) {

var contentStr = '<h5><strong>'+place.name+'</strong></h5><p>'+place.formatted_address;

if (!!place.formatted_phone_number) contentStr += '<br>'+place.formatted_phone_number;

if (!!place.website) contentStr += '<br><a target="_blank" href="'+place.website+'">'+place.website+'</a>';

/* contentStr += '<br>'+place.types+'</p>'; */

contentStr += '<br>ID: '+place.place_id+'</p>';

infowindow.setContent(contentStr);

infowindow.open(map,marker);

} else {

var contentStr = "<h5>No Hubo Resultados, status="+status+"</h5>";

infowindow.setContent(contentStr);

infowindow.open(map,marker);

}

});

}

Finalmente creo los marcadores tanto de mi ubicación como la de los lugares y servicios públicos encontrados en la zona, así mismo defino los datos que quiero mostrar del lugar publico al hacer click en el.


function createMarker(place) {
   var placeLoc = place.geometry.location;
    if (place.icon) {
      var image = new google.maps.MarkerImage(
            place.icon, new google.maps.Size(71, 71),
            new google.maps.Point(0, 0), new google.maps.Point(17, 34),
            new google.maps.Size(25, 25));
    } else var image = null;

    var marker = new google.maps.Marker({
      map: map,
      icon: image,
      position: place.geometry.location
    });

    service = new google.maps.places.PlacesService(map);

    var request =  {
      reference: place.reference
    };

    google.maps.event.addListener(marker,'click',function(){
        service.getDetails(request, function(place, status) {
          if (status == google.maps.places.PlacesServiceStatus.OK) {
            var contentStr = '<h5><strong>'+place.name+'</strong></h5><p>'+place.formatted_address;
            if (!!place.formatted_phone_number) contentStr += '<br>'+place.formatted_phone_number;
            if (!!place.website) contentStr += '<br><a target="_blank" href="'+place.website+'">'+place.website+'</a>';
            /* contentStr += '<br>'+place.types+'</p>'; */
            contentStr += '<br>ID: '+place.place_id+'</p>';
            infowindow.setContent(contentStr);
            infowindow.open(map,marker);
          } else { 
            var contentStr = "<h5>No Hubo Resultados, status="+status+"</h5>";
            infowindow.setContent(contentStr);
            infowindow.open(map,marker);
          }
        });
    });
}

function createMarker(place) {

var placeLoc = place.geometry.location;

if (place.icon) {

var image = new google.maps.MarkerImage(

place.icon, new google.maps.Size(71, 71),

new google.maps.Point(0, 0), new google.maps.Point(17, 34),

new google.maps.Size(25, 25));

} else var image = null;

var marker = new google.maps.Marker({

map: map,

icon: image,

position: place.geometry.location

});

service = new google.maps.places.PlacesService(map);

var request = {

reference: place.reference

};

google.maps.event.addListener(marker,'click',function(){

service.getDetails(request, function(place, status) {

if (status == google.maps.places.PlacesServiceStatus.OK) {

var contentStr = '<h5><strong>'+place.name+'</strong></h5><p>'+place.formatted_address;

if (!!place.formatted_phone_number) contentStr += '<br>'+place.formatted_phone_number;

if (!!place.website) contentStr += '<br><a target="_blank" href="'+place.website+'">'+place.website+'</a>';

/* contentStr += '<br>'+place.types+'</p>'; */

contentStr += '<br>ID: '+place.place_id+'</p>';

infowindow.setContent(contentStr);

infowindow.open(map,marker);

} else {

var contentStr = "<h5>No Hubo Resultados, status="+status+"</h5>";

infowindow.setContent(contentStr);

infowindow.open(map,marker);

}

});

}

Por último y mas importante imprimo toda la configuración hecha:


initMap();

initMap();

Notas:

Para que no te compliques te dejo el código completo lo puedes apreciar en el botón Github al inicio de este artículo.
Cuando ejecutes el codigo en un servidor de pago accede a traves de SSL, es decir asi: https://midominio.com/mi_mapa , si solo usas https://midominio.com/mi_mapa te va arrojar un error de seguridad de la API, lo puedes usar en tu localhost/mi_mapa sin problemas, el problema solo te va salir cuando lo subas a un servidor de pago.

Espero que les sirva de mucho este artículo.

Gracias por su atención.