Добавление поиска по боковой панели в пользовательскую карту Google

Question

У меня возникли трудности с интеграцией API Google Адресов с API карт Google.

У меня есть следующий пользовательский код, работающий для пользовательской стилизованной карты. Тем не менее, раздел, где я пытаюсь добавить поиск Рядом с ресторанами, барами и т. Д., Не работает. Я читал документацию на этой странице https://developers.google.com/maps/documentation/javascript/places#TextSearchRequests, чтобы попытаться понять, и она работает. Я надеюсь, что на моей карте будет боковая панель. Благодаря!

<script> 
window.onload = function() { 
    var styles = [ 
     { 
      featureType: 'water', 
      elementType: 'all', 
      stylers: [ 
       { hue: '#7da6d3' }, 
       { saturation: 8 }, 
       { lightness: -13 }, 
       { visibility: 'on' } 
      ] 
     },{ 
      featureType: 'landscape.man_made', 
      elementType: 'all', 
      stylers: [ 
       { hue: '#ffffff' }, 
       { saturation: -100 }, 
       { lightness: 100 }, 
       { visibility: 'on' } 
      ] 
     },{ 
      featureType: 'road', 
      elementType: 'all', 
      stylers: [ 
       { hue: '#7e90ad' }, 
       { saturation: -78 }, 
       { lightness: -8 }, 
       { visibility: 'simplified' } 
      ] 
     },{ 
      featureType: 'poi.park', 
      elementType: 'all', 
      stylers: [ 
       { hue: '#83cca5' }, 
       { saturation: -3 }, 
       { lightness: -16 }, 
       { visibility: 'simplified' } 
      ] 
     },{ 
      featureType: 'poi.school', 
      elementType: 'all', 
      stylers: [ 
       { hue: '#dddddd' }, 
       { saturation: -100 }, 
       { lightness: 22 }, 
       { visibility: 'on' } 
      ] 
     },{ 
      featureType: 'poi.place_of_worship', 
      elementType: 'all', 
      stylers: [ 
       { hue: '#dddddd' }, 
       { saturation: -100 }, 
       { lightness: 11 }, 
       { visibility: 'simplified' } 
      ] 
     },{ 
      featureType: 'poi.business', 
      elementType: 'geometry', 
      stylers: [ 
       { hue: '#96A6C5' }, 
       { saturation: 16 }, 
       { lightness: -20 }, 
       { visibility: 'on' } 
      ] 
     },{ 
      featureType: 'transit', 
      elementType: 'geometry', 
      stylers: [ 
       { hue: '#7da6d3' }, 
       { saturation: 49 }, 
       { lightness: -12 }, 
       { visibility: 'on' } 
      ] 
     } 
    ]; 

var options = { 
    mapTypeControlOptions: { 
     mapTypeIds: ['Styled'] 
    }, 
    center: new google.maps.LatLng(39.9534988, -75.1748003), 
    zoom: 16, 
    disableDefaultUI: false, 
    mapTypeId: 'Styled' 
}; 
var div = document.getElementById('googleMap'); 
var map = new google.maps.Map(div, options); 

var building = {lat: 39.9534988, lng: -75.1748003}; 
var image = 'images/marker.jpg'; 
var marker = new google.maps.Marker({ 
    position: building, 
    map: map, 
    icon: image 
}); 



var styledMapType = new google.maps.StyledMapType(styles, { name: '1919 Market' }); 
map.mapTypes.set('Styled', styledMapType); 
} 

var request = { 
    location: building, 
    radius: '500', 
    query: 'restaurant' 
}; 

var service = new google.maps.places.PlacesService(map); 
service.radarSearch(request, callback); 


</script> 

Answer 1

Посмотрите на свой код, кажется, что есть много вещей, которые вам нужно исправить. Для новичков я предлагаю вам принять полный пример here, просто измените его, чтобы включить требуемую настройку.

Примечание: вместо использования window.onload используйте атрибут callback в скрипте, чтобы указать функцию, которая будет вызываться после того, как api готовы к использованию. (см. initMap в коде ниже).

<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&signed_in=true&libraries=places&callback=initMap" async defer></script> 

Update:

Вы, возможно, потребуется изучить Google Places API, чтобы достичь того, чего вы хотите. Вот example о том, как работает поиск места.