搜索沒有地點的Google地圖框

Question

如果我訂閱了Google Maps API，但未訂閱Google Places API，但是有可能從搜索詞找到位置地點？

類似的東西來this CODEPEN（使用場所）

(function() { 
 

 
    var marker; 
 
    var map = new google.maps.Map(document.getElementById('map'), { 
 
    mapTypeId: google.maps.MapTypeId.ROADMAP 
 
    }); 
 

 
    var input = document.getElementById('search'); 
 
    var searchBox = new google.maps.places.SearchBox(input); 
 
    
 
    google.maps.event.addListener(searchBox, 'places_changed', updateMap); 
 

 
    function updateMap() { 
 
    var places = searchBox.getPlaces(); 
 
    var place = places[0]; 
 
    var radius = 1000000; 
 

 
    if (marker) { marker.setMap(null); } 
 

 
    marker = new google.maps.Marker({ 
 
     map: map, title: place.name, 
 
     position: place.geometry.location 
 
    }); 
 

 
    var circle = new google.maps.Circle({ 
 
     center: marker.position, radius: radius 
 
    }); 
 
    map.fitBounds(circle.getBounds()); 
 
    } 
 
})();

<input id="search" type="text" placeholder="Search Here"> 
 
<h2/> 
 
<div id="map"></div>

Answer 1

你可以利用Geocoding Service用於這一目的：

的谷歌地圖API提供了一個地理編碼類地理編碼和 從用戶輸入動態地反向地理編碼。

例

function initMap() { 
 

 
    var marker; 
 
    var map = new google.maps.Map(document.getElementById('map'), { 
 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
 
    }); 
 

 
    var btnSearch = document.getElementById('btnSearch'); 
 
    addEvent(btnSearch, 'click', function() { 
 
     var input = document.getElementById('search'); 
 
     updateMap(map, input.value); 
 
    }); 
 
} 
 

 

 

 
function updateMap(map, address) { 
 

 
    var geocoder = new google.maps.Geocoder(); 
 
    if (geocoder) { 
 
     geocoder.geocode({ 'address': address }, function (results, status) { 
 
      if (status == google.maps.GeocoderStatus.OK) { 
 
       //console.log(results[0].geometry.location); 
 

 
       var result = results[0]; 
 
       var radius = 1000000; 
 
       var marker = new google.maps.Marker({ 
 
        map: map, 
 
        title: result.formatted_address, 
 
        position: result.geometry.location 
 
       }); 
 

 
       var circle = new google.maps.Circle({ 
 
        center: marker.position, 
 
        radius: radius 
 
       }); 
 
       map.fitBounds(circle.getBounds()); 
 

 
      } 
 
      else { 
 
       console.log("Geocoding failed: " + status); 
 
      } 
 
     }); 
 
    } 
 

 

 
} 
 

 

 
function addEvent(element, evnt, funct) { 
 
    if (element.attachEvent) 
 
     return element.attachEvent('on' + evnt, funct); 
 
    else 
 
     return element.addEventListener(evnt, funct, false); 
 
}

#map{ 
 
    width: 640px; 
 
    height: 480px; 
 
}

<input id="search" type="text" placeholder="Search Here"> 
 
    <button id="btnSearch">Search</button> 
 
    <h2 /> 
 
    <div id="map"></div> 
 
    <script src="https://maps.googleapis.com/maps/api/js?callback=initMap" 
 
       async defer></script>