Help us understand the problem. What is going on with this article?

Google Maps API Geocoding Service で緯度経度を取得しその場所を表示する

More than 1 year has passed since last update.

やりたいこと

Geocoding Serviceを使って画面から入力された場所へ移動したい

コード

sample.html
<div>
    <label><input type="text" id="addressText"></label>
    <button id="search">検索</button>
<div>

こんなの↑があったとして表示したい場所を入力し検索ボタンを押下するとします(適当)。

gmapsample.js
$(document).on('click', '#search', function () {
    const place = $('#addressText').val();
    getLatLng(place);
});

function getLatLng(place) {
    const geocoder = new google.maps.Geocoder();
    geocoder.geocode({
        address: place
    }, function(results, status) {
        //成功
        if (status == google.maps.GeocoderStatus.OK) {
            //同じズーム値のまま
//          map.panTo(results[0].geometry.location);
//          map.setCenter(results[0].geometry.location);
            //表示領域を調整
            map.fitBounds(results[0].geometry.viewport);
        //失敗
        } else {
            alert('Geocode was not successful for the following reason: ' + status);
        }
    });
}

画面から入力された値をGeocoderに渡して結果を取得し移動するという流れです。
画面からの入力は「東京」とか「ダイバーシティ」とかどこかの住所とかを想定しています。
移動の箇所ですが、今のズーム値のまま表示したい場合はmap.panTo(results[0].geometry.location);map.setCenter(results[0].geometry.location);とするといけます。
また、表示領域を調整していい感じに表示したい場合はmap.fitBounds(results[0].geometry.viewport);とするといけます。

ちなみに、Geocoding Serviceは非同期です:zap:

参考:Geocoding Service

bubbles
仕事ではweb開発をしており、現在はphp(framework:laravel5.4.36)、sqlserver、mysql、javascriptを扱っています。
ayudante
いつもユーザー中心で技術者とコンサルタントがとことん考え抜く それがアユダンテです
https://ayudante.jp/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした