Wie kann Google Map API für das Web verwendet werden?

Question

Ich bin neu für Google Map API, so dass ich nicht weiß, wie man es benutzt.

Also ich möchte einige Anleitung oder Verweis-Link, um daran zu arbeiten.

Notwendigkeit:

ich eine Stelle auf der Karte haben, und ich möchte einige benutzerdefinierte Markierungen zeigen, wie Schulen, Krankenhäuser usw.

ich habe Registerkarten für Schulen, Krankenhäuser usw.

wenn Ich klicke auf Schulen dann in 2km (Drop-Down für KM) zeige alle Schulen um meinen Standort herum und wenn ich schwebe oder auf eine bestimmte Schule klicke, sagt es uns automatisch, wie groß die Entfernung von meinem Standort ist.

Bild wie folgt aus:

ich google map Referenz Link gelesen haben:

https://developers.google.com/maps/web/

Aber ich bin sehr verwirrt. Also bitte geben Sie einen Rat und einen nützlichen Link.

Ein anderes Bild:

Answer 1

ich ein funktionierendes Beispiel für Sie erstellt haben. Um Ihren aktuellen Standort zu erhalten, drücken Sie Get My Location und es würde HTML5 Geolocation API verwenden, um Ihre Koordinaten und google.maps.Geocoder zu erhalten, um diese Koordinaten in eine Adresse zu übersetzen. Drücken Sie Show Locations In Radius, um den Radius auf der Karte anzuzeigen, und zeigen Sie nur Marker an, die sich innerhalb des Radius befinden. Diese Funktion verwendet verschiedene Google Maps API-Aufrufe zum Zeichnen von Radius (google.maps.Circle), Markierungen (google.maps.Marker - API lesen, wenn Sie mehr über benutzerdefinierte Stile wissen möchten), Geocoder und google.maps.geometry.spherical.computeDistanceBetween, die die Entfernung zwischen zwei Standorten in Metern berechnet. Das Beispiel arbeitet mit Dummy-Standortdaten all_locations (das sind nur Beispiele für die New Yorker Second Street), die Sie durch Ihre Daten ersetzen würden. Wenn Sie auf einen Marker klicken, wird die Entfernung in Metern vom Eingabeort angezeigt. Um den Beispielstandort zu sehen, geben Sie "Second Steet, New York" als Adresse ein. (Get My Location wird im Inneren des Schnipsel iframe nicht funktioniert, müssen Sie es auf Ihrem lokalen Host versuchen)

var map = null; 
 
    var radius_circle = null; 
 
    var markers_on_map = []; 
 
    var geocoder = null; 
 
    var infowindow = null; 
 
    
 
    //all_locations is just a sample, you will probably load those from database 
 
    var all_locations = [ 
 
\t {type: "restaurant", name: "Restaurant 1", lat: 40.723080, lng: -73.984340}, 
 
\t {type: "school", name: "School 1", lat: 40.724705, lng: -73.986611}, 
 
\t {type: "school", name: "School 2", lat: 40.724165, lng: -73.983883}, 
 
\t {type: "restaurant", name: "Restaurant 2", lat: 40.721819, lng: -73.991358}, 
 
\t {type: "school", name: "School 3", lat: 40.732056, lng: -73.998683} 
 
    ]; 
 

 
    //initialize map on document ready 
 
    $(document).ready(function(){ 
 
     var latlng = new google.maps.LatLng(40.723080, -73.984340); //you can use any location as center on map startup 
 
     var myOptions = { 
 
     zoom: 1, 
 
     center: latlng, 
 
     mapTypeControl: true, 
 
     mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU}, 
 
     navigationControl: true, 
 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
 
     }; 
 
     map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); 
 
\t geocoder = new google.maps.Geocoder(); 
 
     google.maps.event.addListener(map, 'click', function(){ 
 
      if(infowindow){ 
 
      infowindow.setMap(null); 
 
      infowindow = null; 
 
      } 
 
     }); 
 
     $('#location_type').change(function(){ 
 
     if(radius_circle) showCloseLocations(); 
 
     }); 
 
    }); 
 
    
 
    function showCloseLocations() { 
 
    \t var i; 
 
    \t var radius_km = $('#radius_km').val(); 
 
    \t var address = $('#address').val(); 
 
    var location_type = $('#location_type').val(); 
 

 
    \t //remove all radii and markers from map before displaying new ones 
 
    \t if (radius_circle) { 
 
    \t \t radius_circle.setMap(null); 
 
    \t \t radius_circle = null; 
 
    \t } 
 
    \t for (i = 0; i < markers_on_map.length; i++) { 
 
    \t \t if (markers_on_map[i]) { 
 
    \t \t \t markers_on_map[i].setMap(null); 
 
    \t \t \t markers_on_map[i] = null; 
 
    \t \t } 
 
    \t } 
 

 
    \t if (geocoder) { 
 
    \t \t geocoder.geocode({'address': address}, function (results, status) { 
 
    \t \t \t if (status == google.maps.GeocoderStatus.OK) { 
 
    \t \t \t \t if (status != google.maps.GeocoderStatus.ZERO_RESULTS) { 
 
    \t \t \t \t \t var address_lat_lng = results[0].geometry.location; 
 
    \t \t \t \t \t radius_circle = new google.maps.Circle({ 
 
    \t \t \t \t \t \t center: address_lat_lng, 
 
    \t \t \t \t \t \t radius: radius_km * 1000, 
 
    \t \t \t \t \t \t clickable: false, 
 
\t \t \t \t \t \t map: map 
 
    \t \t \t \t \t }); 
 
        if (radius_circle) map.fitBounds(radius_circle.getBounds()); 
 
    \t \t \t \t \t for (var j = 0; j < all_locations.length; j++) { 
 
    \t \t \t \t \t \t (function (location) { 
 
    \t \t \t \t \t \t \t var marker_lat_lng = new google.maps.LatLng(location.lat, location.lng); 
 
    \t \t \t \t \t \t \t var distance_from_location = google.maps.geometry.spherical.computeDistanceBetween(address_lat_lng, marker_lat_lng); //distance in meters between your location and the marker 
 
    \t \t \t \t \t \t \t if (location_type == location.type && distance_from_location <= radius_km * 1000) { 
 
    \t \t \t \t \t \t \t \t var new_marker = new google.maps.Marker({ 
 
    \t \t \t \t \t \t \t \t \t position: marker_lat_lng, 
 
    \t \t \t \t \t \t \t \t \t map: map, 
 
    \t \t \t \t \t \t \t \t \t title: location.name 
 
    \t \t \t \t \t \t \t \t });  \t \t \t \t \t \t \t \t google.maps.event.addListener(new_marker, 'click', function() { 
 
            if(infowindow){ 
 
      infowindow.setMap(null); 
 
      infowindow = null; 
 
      } 
 
    \t \t \t \t \t \t \t \t \t infowindow = new google.maps.InfoWindow(
 
      { content: '<div style="color:red">'+location.name +'</div>' + " is " + distance_from_location + " meters from my location", 
 
       size: new google.maps.Size(150,50), 
 
       pixelOffset: new google.maps.Size(0, -30) 
 
      , position: marker_lat_lng, map: map}); 
 
    \t \t \t \t \t \t \t \t }); 
 
    \t \t \t \t \t \t \t \t markers_on_map.push(new_marker); 
 
    \t \t \t \t \t \t \t } 
 
    \t \t \t \t \t \t })(all_locations[j]); 
 
    \t \t \t \t \t } 
 
    \t \t \t \t } else { 
 
    \t \t \t \t \t alert("No results found while geocoding!"); 
 
    \t \t \t \t } 
 
    \t \t \t } else { 
 
    \t \t \t \t alert("Geocode was not successful: " + status); 
 
    \t \t \t } 
 
    \t \t }); 
 
    \t } 
 
    } 
 
    
 
    function getMyAdress() { 
 
    \t if (navigator.geolocation) { 
 
    \t \t navigator.geolocation.getCurrentPosition(function (position) { 
 
    \t \t \t geocoder.geocode({latLng: new google.maps.LatLng(position.coords.latitude, position.coords.longitude)}, function (results, status) { 
 
    \t \t \t \t if (status == google.maps.GeocoderStatus.OK) { 
 
    \t \t \t \t \t if (results[0]) { 
 
    \t \t \t \t \t \t $('#address').val(results[0].formatted_address); 
 
    \t \t \t \t \t } else { 
 
    \t \t \t \t \t \t alert("No results found"); 
 
    \t \t \t \t \t } 
 
    \t \t \t \t } else { 
 
    \t \t \t \t \t alert("Geocode was not successful for the following reason: " + status); 
 
    \t \t \t \t } 
 
    \t \t \t }); 
 
    \t \t }, function() { 
 
    \t \t \t alert("Unable to find my location!"); 
 
    \t \t }); 
 
    \t } 
 
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<script type="text/javascript" src="http://www.google.com/jsapi"></script> 
 
<script type="text/javascript"> 
 
     google.load("maps", "3",{other_params:"sensor=false&libraries=geometry"}); 
 
     </script> 
 

 
<body style="margin:0px; padding:0px;" > 
 
<input id="address" value="Second Steet, New York" placeholder="Input Address"/> 
 
<select id="radius_km"> 
 
\t <option value=1>1km</option> 
 
\t <option value=2>2km</option> 
 
\t <option value=5>5km</option> 
 
\t <option value=30>30km</option> 
 
</select> 
 
<select id="location_type"> 
 
\t <option value="restaurant">Restaurant</option> 
 
\t <option value="school">School</option> 
 
</select> 
 
<button onClick="getMyAdress()">Get My Location</button> 
 
<button onClick="showCloseLocations()">Show Locations In Radius</button> 
 
<div id="map_canvas" style="width:500px; height:300px;"> 
 
</body> 
 
</html>