Как получить службу поиска Google без использования элемента div?

Question

У меня есть этот код:

<div id="map" style="display: none"></div> 

Js

var map; 
var infowindow; 

function initMap() { 
    var pyrmont = {lat: -36.1699, lng: 115.1398}; 

    map = new google.maps.Map(document.getElementById('map')); 

    infowindow = new google.maps.InfoWindow(); 
    var service = new google.maps.places.PlacesService(map); 
    service.textSearch({ 
     location: pyrmont, 
     radius : 500, 
     query : 'Las Vegas Vehicle Inspection Stations' 
    }, callback); 
} 

function callback(results, status) { 
    if (status === google.maps.places.PlacesServiceStatus.OK) { 
     for (var i = 0; i < results.length; i++) { 

      console.log(results[i]); 
     } 
    } 
} 

Чтобы получить результаты, которые я должен добавить map к var service = new google.maps.places.PlacesService(map);

есть способ, чтобы получить результаты без использования div элемент?

любая идея?

Answer 1

Вы можете получить результаты без map div. Вы должны предоставить либо google.maps.Map или HTML Div (так атрибуции могут быть оказаны):

google.maps.places.PlacesService Конструктор

PlacesService (attrContainer: HTMLDivElement | Карта)
Создает новый экземпляр объекта PlacesService, который отображает атрибуты в указанном контейнере.

proof of concept fiddle

фрагмент кода:

function initMap() { 
 
    var pyrmont = { 
 
    lat: -36.1699, 
 
    lng: 115.1398 
 
    }; 
 
    var service = new google.maps.places.PlacesService(document.getElementById("placeDiv")); 
 
    service.textSearch({ 
 
    location: pyrmont, 
 
    radius: 500, 
 
    query: 'Las Vegas Vehicle Inspection Stations' 
 
    }, callback); 
 
} 
 

 
function callback(results, status) { 
 
    if (status === google.maps.places.PlacesServiceStatus.OK) { 
 
    var resultsStr = "<table><tr><th>name</th><th>coordinates</th></tr>"; 
 
    for (var i = 0; i < results.length; i++) { 
 
     resultsStr += "<tr><td>" + results[i].name + "</td><td>" + results[i].geometry.location.toUrlValue(6) + "</td></tr>"; 
 
     console.log(results[i]); 
 
    } 
 
    resultsStr += "</table>"; 
 
    document.getElementById("results").innerHTML = resultsStr; 
 
    } 
 
} 
 
google.maps.event.addDomListener(window, "load", initMap);

html, 
 
body, 
 
#map_canvas { 
 
    height: 100%; 
 
    width: 100%; 
 
    margin: 0px; 
 
    padding: 0px 
 
}

<script src="https://maps.googleapis.com/maps/api/js?libraries=places"></script> 
 
<div id="placeDiv"></div> 
 
<div id="results"></div>