カテゴリー
SugiBlog ホームページ制作・システム開発|大阪

Geocoder APIを利用した座標変換

Geocoder APIを使えば住所から座標を取得することができます。
今回はJavaScriptではなくHTTPリクエストで座標を取得する方法をご紹介します。

取得するデータはJSON形式で受け取るようにしています。
使用する言語はPHPです。

まずはリクエストするURLとAPIキーを宣言

$googleapis = "https://maps.googleapis.com/maps/api/geocode/json";
$api_key    = "YOUR API KEY";

続いてパラメーターを追加していきます。
検索する住所を追加

$googleapis .= "?address=" . $address;

国を指定(同じ名前の地名が中国等にあるとそちらの座標になってしまうことがあります)

$googleapis .= "&components=country:JP";

APIキーを設定します

$googleapis .= "&key=" . $api_key;

file_get_contents関数を使ってデータを取得します。

$data = file_get_contents($googleapis);

返ってきたJSONデータを解析して座標を取り出します。

$json = json_decode($data);

$lat = $json->results[0]->geometry->location->lat;
$lng = $json->results[0]->geometry->location->lng;

if( $json->status == "OK" ) {
    echo $lat . "," . $lng;
}

詳細な仕様は公式ドキュメントを参照ください。
https://developers.google.com/maps/documentation/geocoding/intro#GeocodingRequests

0
227 views

GoogleMapにGeoJsonデータを読み込んで表示する

GoogleMapに図形等を描画するのに非常に便利な方法がありました。

//GoogleMapインスタンスを生成(v3)
map = new google.maps.Map(document.getElementById("map"), { center: new google.maps.LatLng(35.6585809608813, 139.74543258547783) } );

// GeoJsonを読み込む
map.data.loadGeoJson('sample.geojson');

// スタイルを設定
map.data.setStyle(function(feature) {

    var myStyle = {
        fillColor: "#9AD2AE",
        fillOpacity: 0.5,
        strokeColor: "#1EB26A",
        strokeOpacity: 0.8,
        strokeWeight: 2,
        clickable: true,
        visible: true,
        zIndex: 1
    };

    return (myStyle);

});

sample.geojsonの内容

{
"type": "FeatureCollection",
"name": "sample",
"crs": { "type": "name", "properties": { "name": "urn:ogc:def:crs:OGC:1.3:CRS84" } },
"features": [
{ "type": "Feature", "properties": { "name": "サンプル1" }, "geometry": { "type": "Polygon", "coordinates": [ [ [ 139.74472479682004, 35.659171090464596 ], [ 139.74610447883606, 35.659171090464596 ], [ 139.74610447883606, 35.65809388391181 ], [ 139.74472479682004, 35.65809388391181 ], [ 139.74472479682004, 35.659171090464596 ] ] ] } }
]
}

今回はポリゴンのみですが、他にポイントやポリラインもGeoJsonで読み込み可能です。
GeoJsonは統一された規格なので汎用性があり便利です。

0
824 views

GoogleMaps 数字アイコンを表示する

targetPoint = new google.maps.LatLng(lat, lng);

markerOptions.map = map;
markerOptions.position = targetPoint;
markerOptions.icon = makeNumIcon(1, 'ff7e73');

var marker = new google.maps.Marker(markerOptions);

//ラベル位置の調整(x, y)
marker.icon.labelOrigin = new google.maps.Point(9, 0);

//ラベルを設定
marker.setOptions({label:{text: '1',color: '#000',fontSize: '20px'}});

marker.setMap(map);


// 数字アイコン作成
//{
    makeNumIcon = function(n, color)
    {
        var icon_color = color || 'ff7e73'; //カラーが指定されなかった場合はデフォルトのカラー

        //文字ありのピン
        //var icon = new google.maps.MarkerImage('//chart.apis.google.com/chart?chst=d_map_pin_letter&chld='+ n + '|' + icon_color + '|000000');

        //文字ありのピン(フォントサイズ等指定)
        //var icon = new google.maps.MarkerImage('//chart.apis.google.com/chart?chst=d_map_spin&chld=0.8|0|' + icon_color + '|16|b|'+ n);

        //文字なしのピン
        var icon = new google.maps.MarkerImage('//chart.apis.google.com/chart?chst=d_map_spin&chld=0.5|0|' + icon_color + '|16|b|');

        return icon;
    }
//}
0
1,073 views

図形を描画して内部の面積を計測する

iOSアプリ上のGoogleMapで図形を描画し、そのパス内部の面積を計測することができます。

まずは図形を描画します。

// Create a rectangular path
let rect = GMSMutablePath()
rect.add(CLLocationCoordinate2D(latitude: 37.36, longitude: -122.0))
rect.add(CLLocationCoordinate2D(latitude: 37.45, longitude: -122.0))
rect.add(CLLocationCoordinate2D(latitude: 37.45, longitude: -122.2))
rect.add(CLLocationCoordinate2D(latitude: 37.36, longitude: -122.2))

// Create the polygon, and assign it to the map.
let polygon = GMSPolygon(path: rect)
polygon.fillColor = UIColor(red: 0.25, green: 0, blue: 0, alpha: 0.05);
polygon.strokeColor = .black
polygon.strokeWidth = 2
polygon.map = mapView

面積を計測

let a: Double = GMSGeometryArea(polygon.path!)

JavaScriptのAPIではパスが閉じている必要がありましたが、
こちらは閉じていなくても閉じているものと仮定してくれるようです。

ただ、実際に使ってみた結果、JavaScript APIのほうで測った面積と24m²ほど差がありました。

JavaScriptでの計測はこちら→GoogleMapで面積計測(v3)

Xcode: 9.4.1
Swift: 3.3
OS: High Sierra 10.13.6

0
643 views

描画ツールライブラリを使う GoogleMap v3

描画ツールを使うとユーザーが地図上に図形を描画することができます。
実際に使用するクラスは「DrawingManager」になります。

このツールは独立したAPIなので、別途使用することを明記しなくてはなりません。
API読み込みの際にパラメータを追加します。

GoogleMapAPI version 3.26

<script type="text/javascript"
  src="https://maps.googleapis.com/maps/api/js?key=[YOUR_API_KEY]&libraries=drawing">
</script>

実装方法は以下のようになります。

var drawingManager = new google.maps.drawing.DrawingManager();
drawingManager.setMap(map);

様々なオプションを指定して実装する

drawingManager = new google.maps.drawing.DrawingManager({
    drawingMode: google.maps.drawing.OverlayType.MARKER, //CIRCLE, MARKER, POLYGON, POLYLINE, RECTANGLE
    drawingControl: true,
    drawingControlOptions: {
        position: google.maps.ControlPosition.TOP_CENTER,
        drawingModes: ['polygon', 'rectangle'] //['marker', 'polyline', 'rectangle', 'circle', 'polygon']
    },
    polygonOptions: {
        fillColor: '#999999',
        fillOpacity: 0.5,
        strokeWeight: 3,
        clickable: false,
        editable: true,
        zIndex: 1
    },
    rectangleOptions: {
        fillColor: '#999999',
        fillOpacity: 0.5,
        strokeWeight: 3,
        clickable: false,
        editable: true,
        zIndex: 1
    }
});
drawingManager.setMap(map);

続きを読む…»

0
1,508 views

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

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

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

class SampleViewController: UIViewController, GMSMapViewDelegate {

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

googleMap.delegate = self

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

var markers : [GMSMarker] = []

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

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

続きを読む…»

0
2,308 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

0
1,897 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

0
1,593 views

GoogleMap ブラウザAPIキーの取得

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

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

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

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

0
1,016 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

0
2,785 views