[SOLUCIONADO] Boton para filtrar "puntos cercanos" con google maps api

Ferdinand1945 · #1 (**permalink**) 16/08/2015, 07:37

Hola amigos! tengo una duda que asumo que no es muy dificil de hacer pero bueno, yo tengo que preguntar... Estoy usando google maps api para hacer una aplicacion bien sencilla en donde si le doy a un boton, por ejemplo "restaurantes" me muestre los restaurantes cercanos a 1,5 kilomentros, si le doy a escuelas, que me muestre solo las escuelas, etc...

Hasta ahora tengo que me muestra todo bien pero claro, todo junto, escuelas, restaurantes, supermercados, etc.... lo que quiero es tener un boton que se llame "escuelas" y me muestre las escuelas, otro restaurantes... y asi... Deberia hacer una funcion para cada punto de interes? o como haria?
Muchas gracias de antemano!!

Este es mi codigo:

Código HTML:

<!DOCTYPE HTML>
<html>
<head>
  <link rel="stylesheet" href="css/style.css">
  <meta charset="UTF-8">
<title>GeoLocation med google map api</title>
    <!-- Google Maps and Places API -->
	<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?libraries=places&sensor=false"></script>
    
    <!-- jQuery -->
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
	<script type="text/javascript">

    function initGeolocation()
    {
            if( navigator.geolocation )
            {

              // Anropar getCurrentPosition med success och failure callbacks
              navigator.geolocation.getCurrentPosition( success, fail );
        }
        else
        {
              alert("Sorry, your browser does not support geolocation services.");
        }
    }

     var map;
     function success(position)
     {
           // Define the coordinates as a Google Maps LatLng Object
           var coords = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);

           // Prepare the map options
           var mapOptions =
          {
                      zoom: 14,
                      center: coords,
                      mapTypeControl: true,
                      navigationControlOptions: {style: google.maps.NavigationControlStyle.SMALL},
                      mapTypeId: google.maps.MapTypeId.ROADMAP
            };

            // Create the map, and place it in the map_canvas div
            map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
			
			//search for schools within 1500 metres of our current location, and as a marker use school.png
			placesRequest('Restaurant',coords,1500,['restaurant'],'images/restaurant-512.png');
            placesRequest('Schools',coords,1500,['school'],'images/school.png');


            // Place the initial marker
            var marker = new google.maps.Marker({
                      position: coords,
                      map: map,
                      title: "Your current location!"
            });
			
        }

        function fail()
        {
              // Could not obtain location
        }
      
		
		//Request places from Google
		function placesRequest(title,latlng,radius,types,icon)
		{
			//Parameters for our places request
			var request = {
				location: latlng,
				radius: radius,
				types: types
			};
			//Make the service call to google
			var callPlaces = new google.maps.places.PlacesService(map);
			callPlaces.search(request, function(results,status){
				//trace what Google gives us back
				$.each(results, function(i,place){
					var placeLoc = place.geometry.location;
					 var thisplace = new google.maps.Marker({
						 map: map,
						 position: place.geometry.location,
						 icon: icon,
						 title: place.name
					 });
				})
			});
			
		}
      
        </script>
</head>
<body onload="initGeolocation();">
  <header class="header">
   <ul>
    <li>Home</li>
     <li>Menu</li>
     <li>Options</li>
    
    </ul>
  
  </header>
  <div class="container">
    <div style=" width:100%; height: 100%; overflow:auto; float:left;">
        <h1>Sök för platser nära dig!</h1>
        <p>
		Vi använder både google places AND google maps, PLUS vi använder geolocatoin för att alltid centrera din position i kartan.
		</p>

    </div>
    <div class="menu-map">
      <ul>
        <li><button onclick="">Escuelas</button></li>
        <li><button onclick="">Restaurantes</button></li>
        <li><button onclick="">Supermercados</button></li>
        <li><button onclick="">Plazas</button></li>     
      </ul>
    </div>
    <!-- map div container -->

<div id="map_canvas" style="width: 100%; height:500px; border-right: 1px solid #666666; border-bottom: 1px solid #666666; border-top: 1px solid #AAAAAA; border-left: 1px solid #AAAAAA;"></div>
    </div>
  <footer class="footer">
  
  
  
  </footer>
</body>
</html>