Wie Ergebnisse angepasst werden in der Nähe Suche in der Nähe, Google Maps JS API V3

Ich bin noch relativ neu zu Google Maps API und JS so könnte dies (wahrscheinlich) eine einfache Antwort haben.Wie Ergebnisse angepasst werden in der Nähe Suche in der Nähe, Google Maps JS API V3

Ich gebe jetzt alle Orte in einem bestimmten Umkreis von wo mein Standort eingestellt ist, aber ich möchte genauer sein, wie nur Baumschulen, Tankstellen und Fitnessstudios und nur diese Marker anzeigen.

Sorry über den langen Code-Block, ist hier eine JSBin wenn Sie https://jsbin.com/yodolexece/edit?html,js,output

Vielen Dank im Voraus bevorzugen würden.

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
    <meta charset="utf-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <title>Locator</title> 

    <script type="text/javascript"  
    src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBdodiLO598_RD8_NYXK7nBKNA9Fhx_uBQ&libraries=places,geometry&.js"></script> 

    <script 
     src="https://code.jquery.com/jquery-3.1.1.js" 
     integrity="sha256-16cdPddA6VdVInumRGo6IbivbERE8p7CQR3HzTBuELA=" 
     crossorigin="anonymous"></script> 
    </head> 
    <body> 
     <input id="findMe" type="button" value="find closest place"> 
     <div id="map-canvas" style="height:500px;"></div> 
    </body> 
    </body> 
    </html>

JS:

<script> 
jQuery(function($) { 
var $overlay = $('.overlay'), 
    resize = true, 
    map; 
var service; 
var marker = []; 
var pos; 
var infowindow; 
var placeLoc 

function initialize() { 
    var mapOptions = { 
    zoom: 15 
    }; 
    map = new google.maps.Map(document.getElementById('map-canvas'), 
    mapOptions); 

    // Try HTML5 geolocation 
    if (navigator.geolocation) { 
    navigator.geolocation.getCurrentPosition(function(position) { 
     var pos = new google.maps.LatLng(position.coords.latitude, position.coords.longitude); 
     $('#findMe').data('pos', pos); 
     var request = { 
     location: pos, 
     radius: 1000, 
     }; 
     infowindow = new google.maps.InfoWindow(); 
     var service = new google.maps.places.PlacesService(map); 
     service.nearbySearch(request, callback); 
     infowindow = new google.maps.InfoWindow({ 
     map: map, 
     position: pos, 
     content: 'You Are Here' 
     }); 
     map.setCenter(pos); 
    }, function() { 
     handleNoGeolocation(true); 
    }); 
    } else { 
    // Browser doesn't support Geolocation 
    handleNoGeolocation(false); 
    } 

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

function createMarker(place) { 
    placeLoc = place.geometry.location; 
    var marker = new google.maps.Marker({ 
    map: map, 
    type: ['store'], 
    position: place.geometry.location, 
    icon: { 
     path: google.maps.SymbolPath.CIRCLE, 
     scale: 8, 
     fillColor: '00a14b', 
     fillOpacity: 0.3, 
     fillStroke: '00a14b', 
     strokeWeight: 4, 
     strokeOpacity: 0.7 
    }, 
    }); 
    google.maps.event.addListener(marker, 'click', function() { 
    infowindow.setContent(place.name); 
    infowindow.open(map, this); 
    }); 
    return marker; 
} 

function handleNoGeolocation(errorFlag) { 
    if (errorFlag) { 
    var content = 'Error: The Geolocation service failed.'; 
    } else { 
    var content = 'Error: Your browser doesn\'t support geolocation.'; 
    } 

    var options = { 
    map: map, 
    position: new google.maps.LatLng(60, 105), 
    content: content 
    }; 
    var infowindow = new google.maps.InfoWindow(options); 
    map.setCenter(options.position); 
} 
google.maps.event.addDomListener(window, 'load', initialize); 

$('#show').click(function() { 
    $overlay.show(); 
    if (resize) { 
    google.maps.event.trigger(map, 'resize'); 
    resize = false; 
    } 
}); 

$('.overlay-bg').click(function() { 
    $overlay.hide(); 
}); 

$("#findMe").click(function() { 
    var pos = $(this).data('pos'), 
    markers = $(this).data('markers'), 
    closest; 
    if (!pos || !markers) { 
    alert('pos or markers not set yet'); 
    return; 
    } 
    $.each(markers, function() { 
    var distance = google.maps.geometry.spherical.computeDistanceBetween(this.getPosition(), pos); 
    if (!closest || closest.distance > distance) { 
     closest = { 
     marker: this, 
     distance: distance 
     } 
    } 
    }); 
    if (closest) { 
    google.maps.event.trigger(closest.marker, 'click') 
    } 
}); 
}); 
</script>

Quelle

2016-10-30 Devin Norgarb

Seine ganz einfach. Sie müssen ein Array von Typen übergeben, die Sie zum Bearbeiten Ihrer Anforderung mit einem neuen Attribut namens filters (zu filternde Typen) benötigen. Ex-Typ: [ 'Bank', 'Fitness-Studio']

Codeblock unten, und ich wird eine modifizierte Version des JS Bin

JS Bin

Orte Arten angebracht von den Links unten

zu finden seine

Place Types

Google Places API-Dokumentation - developers.google.com/maps/documentation/javascript/places#place_search_requests

var request = { 
      location: pos, 
      radius: 1000, 
      types: ['bank', 'gym'] 
      }; 
      infowindow = new google.maps.InfoWindow(); 
      var service = new google.maps.places.PlacesService(map); 
      service.nearbySearch(request, callback);

Quelle

2016-10-30 10:27:56

Ich kann Ihnen nicht genug danken, dachte, es wäre einfach, aber das war super einfach. Du hast mein Wochenende gemacht. –

Kein Problem..Glaube ich könnte dir helfen –

Wie Ergebnisse angepasst werden in der Nähe Suche in der Nähe, Google Maps JS API V3

Antwort

Verwandte Themen