はてなブックマーク

2017.07.09 Geocoding API を使って郵便番号から住所を入力するフォーム みなさん、こんにちは。 よく入力フォームで住所を入力するとき、郵便番号から自動で住所を入力する方法がありますね。今回は、Google Maps Geocoding API を使用してその方法を実現したいと思います。 早速、サンプルのプログラムを作成したので、操作してみてください。7桁の郵便番号を入力し、住所取得ボタンをクリックすると、都道府県、市区町村、住所欄に取得したデータが入力されます。 コーディング方法は、下記のとおりです。注意点として、ジオコードの結果に「address_components」という配列のデータがあります。この配列が住所によって、5個か6個になりますので、数に合わせて出力方法を変更しています。 $.ajax({ url: 'https://maps.googleapis.c

2017.09.10 Googleマップに天気画像を重ねて表示してみる みなさん、こんにちは。 今回は Googleマップ上に、「OpenWeatherMap」という天気情報サービスで公開している降水量、温度などのタイル画像を重ねて表示する方法を解説します。 OpenWeatherMapのサイトはコチラ この天気情報は、タイル画像として配信されていますので、以前、国土地理院や OpenStreeMap で提供している地図タイル画像を表示する方法と同じようにできます。前回と異なる点は、ベース地図自体を変更するのではなく、ベース地図は Google マップのままで、その上にタイル画像を重ねて表示するという点ですね。 Google Maps で OpenStreetMap を表示する！ Googleマップで過去の航空写真を見る 表示する天気情報 名称タイル画像の取得URL降水量

2017.02.01 Embed API で会社のアクセスマップを作成する こんにちは。 会社のホームページにアクセスマップを作成することがありますが、みなさんどのように作成していますか？ 昔はFLASHやイラストレータを使ってコテコテに作成したサイトをよく見かけましたが、最近は Google Maps を使用されているのではないでしょうか？ 簡単ですからね。 マルティスープのホームページも当然アクセスマップを作成していますが、Google Maps Embed API を使用して作成しています。 この Google Maps Embed API は、iFrame 内に Google Maps を簡単に埋め込むことができるAPIで、なんと無償で使用することができます！ では使い方を説明します。 Google Developer Console にてAPIキー（ブラウザキー）を作成してくださ

2018.05.07 Google Map APIs を使用するためのAPIキー取得と設定方法 みなさん、こんにちは。 Google Maps APIs を使用するためには、APIキーを取得する必要があります。以前は、APIキーを設定していなくても使用することができたのですが、2016年6月よりAPIキーが必須となりました。しかし、規約が変更される前から Google Maps APIs を使用している場合は、APIキーを指定しなくても使用できてしまうため混乱しがちですが、現在、APIキーは必須です！ また、2018年6月に登場する Google Maps Platform では、過去のプロジェクトも含め APIキーが設定されていないと、地図がグレーアウトで表示され、操作ができなくなるようです！！ 今回は、そのAPIキーを取得する方法を細かく解説していきたいと思います。 まず、APIキーを

2017.10.28 GoogleマップにFusion Tablesを使ってマーカーを7万個描画する みなさん、こんにちは。 今回は、Google  Fusion Tables にデータを登録し、Google Maps JavaScript API でマーカーを描画してみたいと思います。 ちなみに、みなさんは Fusion Tables をご存知でしょうか？ 簡単にいうと Google が提供する位置情報付きのデータストア（データベース）のことです。以下のブログが参考になります。 https://qiita.com/U11/items/f37cfdaa4fe452946f46 なお、Fusion Tables に登録したデータは、Google Maps API や Google Charts API などから利用できます。 では、早速試していきましょう。 まず、Fusion Tables

2017.10.21 Google Charts を利用して日本地図を色塗りしてみる みなさん、こんにちは。 今回は、Google Charts の GeoChart を利用して、日本地図を都道府県単位で色塗りしてみたいと思います。 Google Charts とは、Google が提供するグラフを描画するツールです。非常にたくさんのグラフを作成できるのですが、その中に地図に関するグラフがあります。 詳細は、下記のページをご覧ください。 https://developers.google.com/chart/ では早速コードを書いていきましょう。 まず、Google Chart の js ファイルをロードします。 <script src="https://www.gstatic.com/charts/loader.js" ></script> GeoChart を利用できるようパッケージを

2017.07.29 Geocoding API で取得できる住所タイプの仕様が変わります みなさん、こんにちは。 2017年9月2018年1月以降に Google Maps Geocoding API の仕様が日本向けに一部変更されます。 今回は、その仕様変更の内容について解説していきたいと思います。 Google Maps Geocoding API を利用すると、現在以下のような結果が取得できます。以下は、弊社の住所「東京都千代田区神田錦町３－１１」でジオコードした結果です。 [ { "address_components": [ { "long_name": "１１", "short_name": "１１", "types": [ "political", "sublocality", "sublocality_level_4" ] }, { "long_name": "３丁目",

2017.12.17 マーカーにスタイルを適用してラベルを描画する みなさん、こんにちは。 今回は Google Map JavaScript API でマーカーを描画する際に、スタイルを適用したラベルの描画方法をご紹介いたします。 通常、ラベル付きマーカーを描画するときは、以下のような記述になります。 var marker = new google.maps.Marker({ map: map, position: new google.maps.LatLng(35.6, 139,6), icon: { url: 'pin.png', scaledSize new google.maps.Size(32, 32), labelOrigin: new google.maps.Point(20, 50) //ラベルの基点 }, label: { text: 'ラベル文字', //ラベル文字

2017.05.19 Googleマップに同心円を描画する みなさん、こんにちは。 Googleマップ上に同心円を書きたいと思ったことはありませんか？ 私は、よくあります。 マルティスープでは、よく位置情報や地図を利用したアプリの開発を行いますが、例えば、半径10km以内の人を探す、物件を探して距離の近い順に並べる、などの要望があります。 開発自体はそれ程難しいものではないのですが、テストをする際にその境界値付近の緯度経度を調へる必要がでてきます。そんなとき、ある地点から同心円を描き、その付近の緯度経度を取得して、テストに利用します。 「同心円」自体は、円（Circle）を同じ中心位置から半径を変更して描画すれば簡単にできます。 デモサイトを作成したので、ご覧ください。 ※デモサイトについて、現在は公開を停止しております。 使い方（公開停止中） 1. 同心円の半径をカンマ区切りで入力します

2017.07.02 Googleマップに色々なマーカーを描画する方法 みなさん、こんにちは！ 今回は、 Google マップ上に色々なマーカーを描画する方法を説明したいと思います。 通常、マーカを描画するときはアイコンを指定しますが、何も指定しないとGoogleマップ標準のアイコンが描画されます。 var marker = new google.maps.Marker({ map: _map, position: new google.maps.LatLng(35.693235, 139.757864), animation: google.maps.Animation.DROP }); 次に、自作のアイコンを指定する方法です。下記のようにアイコンのURLとサイズを指定してください。 var marker = new google.maps.Marker({ map: _map, pos

2017.03.11 GoogleマップにGeoJSONで図形を描画する みなさん、こんにちは！ 前回、KMLファイルを使って図形を描画する方法を紹介しましたが、今回は GeoJSON ファイルを使って図形を描画する方法を紹介します！ Google マップにKMLファイルをロードする 今回紹介する GeoJSON は ジオメトリ図形を JSON形式で表現する方法です。最近の流行りである JSON 形式で表現できるので非常に使い勝手が良いですね。 Wikipedia の紹介ページはコチラ KMLファイルの場合、ファイルをグローバルなURLに置かないといけないという課題がありましたが、GeoJSON の場合は、ローカルのURLでも利用することができます。 イントラ利用で一括で図形を描画したいときには、GeoJSON がオススメですね。 さて、早速デモ画面を見ていきましょう。「GeoJSONロー