Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
5
Help us understand the problem. What is going on with this article?
@yama04070319

Googlemap API で全てのピンを地図内に収めたい時

More than 1 year has passed since last update.

Webアプリケーションを作っていてGooglemap API関連の機能を作っていると
登録した地点全てを地図内に収めたい時がある。

写真で言うとこんな感じ。
無題.png

それを行うにはJavascriptで実現していく。ネットにはいろいろ上記を実現させる方法が
書いてあったがあまり上手くいかなかった。。

今回、採用したのは以下のアルゴリズム

・初めに出来る限り、ズームアップしておく。

・次に一つ一つ対象のデータを見てそのピンが地図内に収まるようにズームアウトしていく

である。

以下にソースを載せておく。

map.js
function initMap() {
          map = new google.maps.Map(document.getElementById('map'), {
          center: {lat: ave_latitude, lng: ave_longitude} ,
          zoom: 16,
          });

          var bounds = new google.maps.LatLngBounds();

          for (var i = 0; i < data.length; i++) {
              markerLatLng = {lat: data[i]['lat'], lng: data[i]['lng']};
              marker[i] = new google.maps.Marker({
              position: markerLatLng,
              map: map
            });
            bounds.extend(new google.maps.LatLng(data[i]['lat'], data[i]['lng'])); 
          }
          map.fitBounds (bounds);
        }
5
Help us understand the problem. What is going on with this article?
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.
Sign Up
If you already have a Qiita account Login
5
Help us understand the problem. What is going on with this article?