Branberyheag!! Lab » google maps api http://lab.branberyheag.com ActionScript3.0やJavascriptを使っていろんなものを作ってみます。 Fri, 03 Feb 2012 06:28:02 +0000 ja hourly 1 Google Maps APIでマーカーにGIFアニメーションが動かなくなるのを防ぐ方法 http://lab.branberyheag.com/2011/09/28/google-maps-api%e3%81%a7%e3%83%9e%e3%83%bc%e3%82%ab%e3%83%bc%e3%81%abgif%e3%82%a2%e3%83%8b%e3%83%a1%e3%83%bc%e3%82%b7%e3%83%a7%e3%83%b3%e3%81%8c%e5%8b%95%e3%81%8b%e3%81%aa%e3%81%8f%e3%81%aa%e3%82%8b.html http://lab.branberyheag.com/2011/09/28/google-maps-api%e3%81%a7%e3%83%9e%e3%83%bc%e3%82%ab%e3%83%bc%e3%81%abgif%e3%82%a2%e3%83%8b%e3%83%a1%e3%83%bc%e3%82%b7%e3%83%a7%e3%83%b3%e3%81%8c%e5%8b%95%e3%81%8b%e3%81%aa%e3%81%8f%e3%81%aa%e3%82%8b.html#comments Wed, 28 Sep 2011 09:02:11 +0000 isao http://lab.branberyheag.com/?p=1102 Google Maps APIでGIFアニメーションマーカーを設置するときに、アニメーションが動かなくなることがあるようだ。その回避方法が書いていてあったので、めも。


var point = new google.maps.Marker({
position: hogehoge,
map: hoge,
icon: hoge_img,
shadow: hoge2_img,       //末尾に「,」を加える
optimized:false              //←この1行を加える
});

参考URL

 関連した記事

]]> http://lab.branberyheag.com/2011/09/28/google-maps-api%e3%81%a7%e3%83%9e%e3%83%bc%e3%82%ab%e3%83%bc%e3%81%abgif%e3%82%a2%e3%83%8b%e3%83%a1%e3%83%bc%e3%82%b7%e3%83%a7%e3%83%b3%e3%81%8c%e5%8b%95%e3%81%8b%e3%81%aa%e3%81%8f%e3%81%aa%e3%82%8b.html/feed 0 Google Maps API V3が面白い！ http://lab.branberyheag.com/2011/04/26/google-maps-api-v3%e3%81%ab%e3%81%a4%e3%81%84%e3%81%a6%e4%b9%85%e3%81%97%e3%81%b6%e3%82%8a%e3%81%ab%e8%aa%bf%e3%81%b9%e3%81%a6%e3%81%bf%e3%81%9f.html http://lab.branberyheag.com/2011/04/26/google-maps-api-v3%e3%81%ab%e3%81%a4%e3%81%84%e3%81%a6%e4%b9%85%e3%81%97%e3%81%b6%e3%82%8a%e3%81%ab%e8%aa%bf%e3%81%b9%e3%81%a6%e3%81%bf%e3%81%9f.html#comments Tue, 26 Apr 2011 02:52:04 +0000 isao http://lab.branberyheag.com/?p=1013 ちょっと、Google Maps API V3から離れているうちにかなり進化をしていて、びっくりしたので、メモ。
調べていた頃は、英語版しかリファレンスがなかったのに、今は日本語版リファレンスが出てて、びっくり。かなりV3が安定的なサービスになってきたんだと思う。

特にStyled Map 機能とマーカーのアニメーション機能は、どこかで使ってみたい。しかも、設定がものすごく簡単にできてしまう。（JavaScriptが分かればホント簡単）

Styled Map 機能を試したい場合は、Styled Map Wizard で試すのがいいかも。スタイリッシュな地図が完成する。

マーカーのアニメーション機能については、日本語リファレンスには、記載がないので、英語版を見るとみるいいかも。使い方、実装の参考には、「マーカーアニメーションクラス　アイコンが降ってきたり、飛び跳ねたり！」サンプルとソースがある。

また、「すきなばしょ」を今の技術に合わせたものに作り直したくなるくらい、Google Maps API V3が面白くなってきた。ただの地図表示ツールだけではなく、おもいっきり遊んで地図の表示ツール以上の使い方をするとかなり面白いと思う。

Google先生が作ったサービス
http://www.messagesforjapan.com/関連した記事

]]> http://lab.branberyheag.com/2011/04/26/google-maps-api-v3%e3%81%ab%e3%81%a4%e3%81%84%e3%81%a6%e4%b9%85%e3%81%97%e3%81%b6%e3%82%8a%e3%81%ab%e8%aa%bf%e3%81%b9%e3%81%a6%e3%81%bf%e3%81%9f.html/feed 0 Google Maps API でSSLが使えるようになった http://lab.branberyheag.com/2011/03/19/google-maps-api_on_ssl.html http://lab.branberyheag.com/2011/03/19/google-maps-api_on_ssl.html#comments Fri, 18 Mar 2011 22:15:50 +0000 isao http://lab.branberyheag.com/?p=966 Google Maps API（無償版）で、今までGoogle Maps API Premierのみの対応だったSSLが無償版でも対応になったようだ。

使い方は、以下のとおり。

対象となるAPI

v3<http://code.google.com/apis/maps/documentation/javascript/>
Static Maps API<http://code.google.com/apis/maps/documentation/staticmaps/>
Maps APIウェブサービス<http://code.google.com/apis/maps/documentation/webservices/>(Places APIは除く)

Maps API v3での使い方

<script type=”text/javascript” src=”http://maps.google.com/maps/api/js?sensor=false“></script>

↓

<script type=”text/javascript” src=”http://maps-api-ssl.google.com/maps/api/js?sensor=false“></script>
Google Static Maps APIとMaps API ウェブサービスは、 maps.googleapis.com にアクセス。

参考資料
Google Maps JavaScript API V3関連した記事

]]> http://lab.branberyheag.com/2011/03/19/google-maps-api_on_ssl.html/feed 0 Instagram APIについていろいろと調べてみた http://lab.branberyheag.com/2011/03/08/instagram-api%e3%81%ab%e3%81%a4%e3%81%84%e3%81%a6%e3%81%84%e3%82%8d%e3%81%84%e3%82%8d%e3%81%a8%e8%aa%bf%e3%81%b9%e3%81%a6%e3%81%bf%e3%81%9f.html http://lab.branberyheag.com/2011/03/08/instagram-api%e3%81%ab%e3%81%a4%e3%81%84%e3%81%a6%e3%81%84%e3%82%8d%e3%81%84%e3%82%8d%e3%81%a8%e8%aa%bf%e3%81%b9%e3%81%a6%e3%81%bf%e3%81%9f.html#comments Tue, 08 Mar 2011 10:09:22 +0000 isao http://lab.branberyheag.com/?p=957 完全に乗り遅れた感じだけど、Instagram API（公式）が出てた。

写真系のSNSでしかも、やりたかったことができそうなので、すぐに食いついてしまった。
コメント、タグ、いいね！、は、できるみたいだけど、写真の投稿は、iPhone,iPodtouchからしかできないみたい。
それでも十分なすぎるくらいの機能なので、気にならない。

Instagramのいいところって、ロケーション機能がしっかりしていること。
これとGoogle Map APIを使って、写真と地図とリアルタイム性ていうのが、すごくひもづけられて面白いかも。

データ取得だけだったら、JSONなので、フロントエンドのみで遊べちゃう。
久しぶりに燃えてきたぞ。

Instagram API ドキュメント
http://instagram.com/developer/

Instagram APIを触ってみる
http://lab.branberyheag.com/wp-admin/post-new.php関連した記事

]]> http://lab.branberyheag.com/2011/03/08/instagram-api%e3%81%ab%e3%81%a4%e3%81%84%e3%81%a6%e3%81%84%e3%82%8d%e3%81%84%e3%82%8d%e3%81%a8%e8%aa%bf%e3%81%b9%e3%81%a6%e3%81%bf%e3%81%9f.html/feed 0 Google Map API V3のマニュアルの日本語化 http://lab.branberyheag.com/2010/09/30/google-map-api-v3%e3%81%ae%e3%83%9e%e3%83%8b%e3%83%a5%e3%82%a2%e3%83%ab%e3%81%ae%e6%97%a5%e6%9c%ac%e8%aa%9e%e5%8c%96.html http://lab.branberyheag.com/2010/09/30/google-map-api-v3%e3%81%ae%e3%83%9e%e3%83%8b%e3%83%a5%e3%82%a2%e3%83%ab%e3%81%ae%e6%97%a5%e6%9c%ac%e8%aa%9e%e5%8c%96.html#comments Wed, 29 Sep 2010 17:24:49 +0000 isao http://lab.branberyheag.com/?p=856 やっと、Google Map API V3のマニュアルが日本語された。特に不便じゃなかったけど、いざっていうときに日本語じゃないとしんどかった。でも、これでこの悩みも解消。

Google Maps JavaScript API V3
http://code.google.com/intl/ja/apis/maps/documentation/javascript/

「すきなばしょ」もV3でできているので、有難い。関連した記事

]]> http://lab.branberyheag.com/2010/09/30/google-map-api-v3%e3%81%ae%e3%83%9e%e3%83%8b%e3%83%a5%e3%82%a2%e3%83%ab%e3%81%ae%e6%97%a5%e6%9c%ac%e8%aa%9e%e5%8c%96.html/feed 0 ケータイでGPSを取得するライブラリについて http://lab.branberyheag.com/2010/04/05/%e3%82%b1%e3%83%bc%e3%82%bf%e3%82%a4%e3%81%a7gps%e3%82%92%e5%8f%96%e5%be%97%e3%81%99%e3%82%8b%e3%83%a9%e3%82%a4%e3%83%96%e3%83%a9%e3%83%aa%e3%81%ab%e3%81%a4%e3%81%84%e3%81%a6.html http://lab.branberyheag.com/2010/04/05/%e3%82%b1%e3%83%bc%e3%82%bf%e3%82%a4%e3%81%a7gps%e3%82%92%e5%8f%96%e5%be%97%e3%81%99%e3%82%8b%e3%83%a9%e3%82%a4%e3%83%96%e3%83%a9%e3%83%aa%e3%81%ab%e3%81%a4%e3%81%84%e3%81%a6.html#comments Mon, 05 Apr 2010 11:26:15 +0000 isao http://lab.branberyheag.com/?p=649 あるものを作っていて、そのツールがGPSで経緯を取得して、表示するツールでこれをなんとかケータイ版に移植しようかと考え中。PHPでケータイからデータを取得できるらしいので、ライブラリを使って試してみようと思う。

ていうことで、メモ。

Net_UserAgent_Mobile_GPS

関連した記事

]]> http://lab.branberyheag.com/2010/04/05/%e3%82%b1%e3%83%bc%e3%82%bf%e3%82%a4%e3%81%a7gps%e3%82%92%e5%8f%96%e5%be%97%e3%81%99%e3%82%8b%e3%83%a9%e3%82%a4%e3%83%96%e3%83%a9%e3%83%aa%e3%81%ab%e3%81%a4%e3%81%84%e3%81%a6.html/feed 0 「すきなばしょ」の地図をパフォーマンスを上げる http://lab.branberyheag.com/2010/03/01/%e3%80%8c%e3%81%99%e3%81%8d%e3%81%aa%e3%81%b0%e3%81%97%e3%82%87%e3%80%8d%e3%81%ae%e5%9c%b0%e5%9b%b3%e3%82%92%e3%83%91%e3%83%95%e3%82%a9%e3%83%bc%e3%83%9e%e3%83%b3%e3%82%b9%e3%82%92%e4%b8%8a%e3%81%92.html http://lab.branberyheag.com/2010/03/01/%e3%80%8c%e3%81%99%e3%81%8d%e3%81%aa%e3%81%b0%e3%81%97%e3%82%87%e3%80%8d%e3%81%ae%e5%9c%b0%e5%9b%b3%e3%82%92%e3%83%91%e3%83%95%e3%82%a9%e3%83%bc%e3%83%9e%e3%83%b3%e3%82%b9%e3%82%92%e4%b8%8a%e3%81%92.html#comments Sun, 28 Feb 2010 16:23:35 +0000 isao http://lab.branberyheag.com/?p=613 「すきなばしょ」の表示速度が気になるようになってきた。

本当にできることがないのかいろいろと考えてみたら、Google Maps API V2からV3へバージョンアップしてみようかと思った。実際にやってみたところ、表示速度が若干あがったような気がした。

今週、ちょっとバージョンアップの作業をしてみようと思った。関連した記事

]]> http://lab.branberyheag.com/2010/03/01/%e3%80%8c%e3%81%99%e3%81%8d%e3%81%aa%e3%81%b0%e3%81%97%e3%82%87%e3%80%8d%e3%81%ae%e5%9c%b0%e5%9b%b3%e3%82%92%e3%83%91%e3%83%95%e3%82%a9%e3%83%bc%e3%83%9e%e3%83%b3%e3%82%b9%e3%82%92%e4%b8%8a%e3%81%92.html/feed 0 iPhone/Androidの現在位置取得のまとめ http://lab.branberyheag.com/2010/02/11/iphoneandroid%e3%81%ae%e7%8f%be%e5%9c%a8%e4%bd%8d%e7%bd%ae%e5%8f%96%e5%be%97%e3%81%ae%e3%81%be%e3%81%a8%e3%82%81.html http://lab.branberyheag.com/2010/02/11/iphoneandroid%e3%81%ae%e7%8f%be%e5%9c%a8%e4%bd%8d%e7%bd%ae%e5%8f%96%e5%be%97%e3%81%ae%e3%81%be%e3%81%a8%e3%82%81.html#comments Thu, 11 Feb 2010 00:59:31 +0000 isao http://lab.branberyheag.com/?p=585 ここ３日くらいずっと、モバイルに搭載してあるGPSを使って、自分の位置を取得できるかずっと格闘しつづけていた。
iPhone/Androidともに案外簡単に実装できる。しかも、Javascriptで簡単に実装可能。それをGoogle Maps APIに値を渡せば、表示もできちゃう。

「すきなばしょ」の機能として埋め込もうと思って、作っていたけど、ほぼ完成している。
あとは、ちょっとCSSとJavascriptの調整をするだけ。

難しそうなことが簡単にできちゃうことが、すごいと思った。

参考にしたサイト

関連した記事

]]> http://lab.branberyheag.com/2010/02/11/iphoneandroid%e3%81%ae%e7%8f%be%e5%9c%a8%e4%bd%8d%e7%bd%ae%e5%8f%96%e5%be%97%e3%81%ae%e3%81%be%e3%81%a8%e3%82%81.html/feed 0 Gears Geolocation APIによる位置情報取得について http://lab.branberyheag.com/2010/02/08/gears-geolocation-api%e3%81%ab%e3%82%88%e3%82%8b%e4%bd%8d%e7%bd%ae%e6%83%85%e5%a0%b1%e5%8f%96%e5%be%97%e3%81%ab%e3%81%a4%e3%81%84%e3%81%a6.html http://lab.branberyheag.com/2010/02/08/gears-geolocation-api%e3%81%ab%e3%82%88%e3%82%8b%e4%bd%8d%e7%bd%ae%e6%83%85%e5%a0%b1%e5%8f%96%e5%be%97%e3%81%ab%e3%81%a4%e3%81%84%e3%81%a6.html#comments Mon, 08 Feb 2010 00:45:07 +0000 isao http://lab.branberyheag.com/?p=582 今、スマートフォンで位置情報を取得し、メール投稿する時にGPS情報も送信する、支援ツールを作っている。というかもう完成した。

iPhoneとAndroidで位置情報を取得できるようにして、Google Maps API v3にデータを渡して表示するということをやっているんだけど、前回の方法iPhoneは簡単に取得できる。

Androidも実は、Gears Geolocation APIを使うと案外簡単に位置情報が取得できる。
PCで検証するには、Google Gearがインストールされていないと確認ができないよ。

Geolocation API – Gears API – Google Code

を見ると書いているけど、gears_init.jsを置いて、以下のように記述すると

<pre><pre><script type="text/javascript" src="gears_init.js"></script>
<script type="text/javascript">
var geo = google.gears.factory.create('beta.geolocation');

function updatePosition(position) {
  alert('Current lat/lon is: ' + position.latitude + ',' + position.longitude);
}

function handleError(positionError) {
  alert('Attempt to get location failed: ' + positionError.message);
}

geo.getCurrentPosition(updatePosition, handleError);
</script>

簡単に取得できる。あとは、Google Maps API V3と組み合わせて実装すれば完成。
案外簡単に位置情報が取得ができるから、いいよね。

参考にした記事

Google Maps API V3 と Gears Geolocation API 使って Android のブラウザで現在位置情報を取得する

関連した記事

]]> http://lab.branberyheag.com/2010/02/08/gears-geolocation-api%e3%81%ab%e3%82%88%e3%82%8b%e4%bd%8d%e7%bd%ae%e6%83%85%e5%a0%b1%e5%8f%96%e5%be%97%e3%81%ab%e3%81%a4%e3%81%84%e3%81%a6.html/feed 1 Google Maps API v3をじっくりといじってみた http://lab.branberyheag.com/2010/01/28/google-maps-api-v3_good-job.html http://lab.branberyheag.com/2010/01/28/google-maps-api-v3_good-job.html#comments Thu, 28 Jan 2010 12:00:28 +0000 isao http://lab.branberyheag.com/?p=563 昨日、Google Maps API v3をじっくりといじってみた。
スマートフォンに対してパフォーマンス改善が行われたようなので、ちょっと前から気になっていた。v2に比べて、記述の仕方がぜんぜん違うけど、v3のほうがスマートでコードを書けるような気がする。設定の値とかまとまっているので、いいのかも。

v2に比べると機能が少ないかなという印象があるな。これは、そのうちv3にv2の全機能が移植されると思うので、それほど心配していない。

一番苦戦したのは、デフォルトのUIを外す作業が一番時間がかかった。リファレンスに書いてあったけど、なかなか見つけられなかった。

mapOption = {
zoom : defZoom
center : defLatlng,
navigationControl : false,
mapTypeControl : false,
scaleControl: true,
mapTypeId : google.maps.MapTypeId.SATELLITE
}
gmap = new google.maps.Map(jQuery('div#bgMap').get(0), mapOption);

作ったものをモロコピペしただけど、「navigationControl」、「mapTypeControl」、「scaleControl」で設定する。UIを取り除くだけじゃなく、UIの大きさもここで変更するようだ。

あと、地図をロードマップか衛星写真かを切り替えるときにも値が分からずハマった。

gmap.setMapTypeId(google.maps.MapTypeId.ROADMAP);

と書くようだ。v2のほうがシンプル。

全体的には、コードを書く量は減っているし、スマートフォンを対象に入れているようななので、機能が増えたらいろいろと使ってみたい。

参考にしたサイト

三丁目の電脳

関連した記事

]]> http://lab.branberyheag.com/2010/01/28/google-maps-api-v3_good-job.html/feed 0