カテゴリー
SugiBlog Webエンジニアのためのお役立ちTips

GoogleMap 表示範囲内のみマーカー表示

GoogleMap上にたくさんのマーカーを描画したい場合、マーカーが多過ぎて処理が重くなるのを防ぎたいので、
予め地図の表示範囲内のみ、マーカーを描画するようにしてみたいと思います。

まずはイベントを受け取り、処理できるようデリゲート[GMSMapViewDelegate]を追加します。

class SampleViewController: UIViewController, GMSMapViewDelegate {

GoogleMapオブジェクトにデリゲートを設定します。

googleMap.delegate = self

マーカーを追加する際、後から表示/非表示を変更したいので、配列のマーカーオブジェクトを宣言しておきます。

var markers : [GMSMarker] = []

マーカーを追加したときに先ほどの配列に追加します。

let marker: ...
markers.append(marker)

続きを読む…»

4,265 views

GoogleMapに現在地を表示

Info.plistに位置情報の利用を追加します。
GoogleMapに現在地を表示するだけなら、CoreLocationは必要ないようです。

Privacy - Location When In Use Usage Description

Valueには「現在地の情報を利用します」等としておきます。

GoogleMapの表示方法については[iOSアプリでGoogleMapを使う]をご覧ください。

位置情報を利用して現在地を表示する

googleMap.isMyLocationEnabled = true

現在地ボタンを表示する

googleMap.settings.myLocationButton = true

Xcode: 8.2.1
Swift: 3.1
OS: Sierra 10.12

3,164 views

GoogleMaps API 標高の取得

GoogleMapのGoogle Maps Elevation APIを使用して標高を取得することができます。
利用にはAPIキーが必須です。詳しくは、[GoogleMap ブラウザAPIキーの取得]を参照してください。

座標オブジェクトを作成します。

var location = new google.maps.LatLng(35.7100627, 139.8085064);

リクエストパラメータを作成します。
座標オブジェウトを配列にします。

var request = { locations: new Array(location) };

ElevationServiceクラスのインスタンスを作成します。

var myElevation = new google.maps.ElevationService();

getElevationForLocationsメソッドを使って標高を取得します。

myElevation.getElevationForLocations(request, function(response, status) {

    if(status == google.maps.ElevationStatus.OK) {

        alert(response[0].elevation + "m");

    } else {

        alert("取得できませんでした。");

    }

});

公式リファレンス:Google Maps Elevation API
https://developers.google.com/maps/documentation/elevation/intro?hl=ja

2,560 views

GoogleMap ブラウザAPIキーの取得

現時点ではまだAPIキーがなくても表示されますが、APIキーの利用が必須となったようです。
今回はGoogleMapを利用するためのAPIキーの取得方法をご紹介します。

まずはウェブ向け Google Maps APIにアクセス。
「キーを取得」をクリックします。
001

APIキー取得までの説明が表示されますので、「続ける」をクリックしてください。
002

Googleのログインが必要ですので、促されたタイミングでログインしてください。
続きを読む…»

1,958 views

GoogleMapに円を描くJavaScript

GoogleMap上に円を描く方法をご紹介します。

CircleOptionsクラス

var myCircleOptions = {
    center: null,           // 中心の座標
    clickable: true,        // クリックの可否(デフォルトtrue)
    draggable: false,       // ドラッグの可否(デフォルトfalse)
    editable: false,        // 編集の可否(デフォルトfalse)
    fillColor: "#ffffff",   // 塗り潰しの色
    fillOpacity: 0.7,       // 塗り潰しの不透明度 0.0~1.0
    map: map,               // GoogleMapのインスタンス
    radius: 0,              // 半径(単位:m)
    strokeColor: "#6090ff", // 線の色
    strokeOpacity: 0.9,     // 線の不透明度 0.0~1.0
    strokePosition: 
        google.maps.StrokePosition.CENTER, // 線の位置(CENTER|INSIDE|OUTSIDE)
    strokeWeight: 3,        // 線の太さ(単位:ピクセル)
    visible: true,          // 表示の有無(デフォルトtrue)
    zIndex: 1               // 重なり順
}

設定したオプションを利用してサークルオブジェクトを作成します。

myCircle = new google.maps.Circle(myCircleOptions);

マップを後から設定する場合は

myCircle.setMap(map);

公式リファレンスはこちらから
https://developers.google.com/maps/documentation/javascript/reference#Circle

4,671 views