Google MapのPlacesService（プレイスライブラリ）を使ってみた

GooglaMapAPI

Last updated at 2024-01-20Posted at 2024-01-20

Google MapのPlacesService（プレイスライブラリ）を使ってみたので、その時のメモ。

Google Mapのキーの取得方法はこちら（https://qiita.com/sera_ramon/items/707ac5064f6e6343df05）

TestPlacesService.html

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <title>TEST PlacesService</title>
  </head>
  <body>
    <div id="map" style="width:100%; height:500px"></div>
    <script
      src="https://maps.googleapis.com/maps/api/js?key=＜＜＜ここにキーを記載＞＞＞&libraries=places&callback=initMap&v=weekly"
      defer
    ></script>
    <script>
      function initMap() {
        alert('pause');
        _map = new google.maps.Map(document.getElementById("map"), {
          zoom: 12,
          center: { lat: 34.9875936, lng: 135.7567649 },
          mapTypeId: "terrain",
        });

        var request = {
          location: new google.maps.LatLng(34.9875936, 135.7567649),
          radius: '500',
          type: ['tourist_attraction']
        };
        service = new google.maps.places.PlacesService(_map);
        service.nearbySearch(request, callback);
      }
      window.initMap = initMap;

      function callback(results, status) {
        if (status == google.maps.places.PlacesServiceStatus.OK) {
          for (var result of results) {
            console.log(result);
          }
        }
      }
    </script>
  </body>
</html>

以上です。

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up