LoginSignup
0
0

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

Last updated at Posted 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>

以上です。

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0