Google Map API for Webの使い方は？

Question

私は新しいですGoogleマップAPIのために私はそれを使用する方法がわかりません。

だから私はいくつかのガイダンスやリファレンスリンクが必要です。

必要があります。

私は、地図上の場所を持っていると私は、学校、病院などの場合のように、いくつかのカスタムマーカーを表示したい

私は学校、病院など

のタブを持っています私は学校をクリックして2km（KMのドロップダウン）で私の場所の周りのすべての学校を表示し、ホバーや特定の学校をクリックすると私の場所からどのくらいの距離を自動的に教えてくれます。このよう

画像：私はグーグルマップの参照リンクを読んだ

は：

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

しかし、私は非常に混乱しています。ですから、いくつかのアドバイスと役に立つリンクをお願いします。

別の画像：

Answer 1

私はあなたのための作業例を作成しました。あなたの現在の位置を取得するには、Get My Locationを押して、HTML5ジオロケーションAPIを使用して座標を取得し、google.maps.Geocoderを使用してそれらの座標をアドレスに変換します。 Show Locations In Radiusを押すと、地図上に半径を表示し、半径内にあるマーカーも表示します。この関数は、半径（google.maps.Circle）、マーカー（google.maps.Marker - カスタムスタイリングの詳細を知りたい場合はAPIを読み込みます）、Geocoder、さらにはgoogle.maps.geometry.spherical.computeDistanceBetweenという2つの位置間の距離をメートル単位で計算するさまざまなGoogleマップAPI呼び出しを使用します。この例では、ダミーの位置データall_locations（これらはニューヨークのSecond Street周辺の標本マーカーです）を使用してデータと置き換えます。マーカーをクリックすると、入力位置からの距離がメートル単位で表示されます。例の場所を表示するには、住所として「Second Steet、New York」と入力します。あなたが自分で見つけ、あなたが必要とするだけでリンクを持っている

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>