Street View Random Walker
x Google Street Viewを自動操縦して、道なりに周辺を歩いています。 別れ道があったら、ときどき曲がります。 このサイトを見ていない間も、常にGoogle Street View上のどこかを勝手にさまよっています。 制作:東 信伍 支援者たち(敬称略) GoogleストリートビューにアクセスするためのAPI使用料を、以下の方々にご支援いただいています。 500円でフォントサイズ14px、プラス500円ごとに1pxずつ大きくなります。 メーン会場、Aqua_ix、watasuke、鹿、mataku、F_TAISI、spacelamb9、wecken、kzumu、雑食性鵺型情報生命体02、oooo_yuki、くらますかずま、さのかずや、雨宮美奈子、barao、ミオジョウ、gonshi_com、tettou771、twinklecool、futoase、hitode909、ペンギ
地図アプリの開発を爆速化する「Webマッピング」サービスの活用術を大公開！ - paiza times
どうも、まさとらん（@0310lan）です。 今回は、地図上にデータをマッピングすることで、さまざまな情報を「見える化(可視化)」できるWebサービスの活用法についてご紹介しようと思います！ マッピングが出来るようになると、単なる「データの集まり」だったものが視覚的にとても分かりやすくなるので非常に便利です。 誰でも簡単に扱える定番のマッピングサービスから、地図アプリなどの開発に役立つモノまで取り上げてご紹介しようと思います。 ちなみに、マッピングをするのに必要な「データ」に関しては、無償で利用できるオープンデータをまとめたサイト「LinkData」に公開中のモノを利用しているので、みなさんもぜひ一緒にトライしてみてください！ ■「Googleマイマップ」を活用しよう！ まずは、誰でも扱いやすいGoogleの「マイマップ機能」を使って、簡単なマッピングに挑戦してみましょう！ データは、Li
Google Maps JavaScript APIの使い方まとめ
公開日: 2015/09/01 | 更新日: 2017/07/05 Googleが提供する、Google Maps JavaScript APIを利用して、ウェブページに地図を表示させる方法を説明します。通常の埋め込み型の地図とは違い、コントローラの調整、マーカーや吹き出しを配置したりなど、機能が満載です。 Google Maps JavaScript API V3 ReferenceGoogle Maps JavaScript API V3 ReferenceGoogle Maps JavaScript APIの公式リファレンスです。全てのメソッド、オプションなどについての解説が掲載されています。準備 (APIキーの取得)Google Maps JavaScript APIを利用するには、APIの有効化と、認証情報(APIキー)が必要です。この章では取得方法を説明します。 アカウントの用
Sightsmap
The heatmap shows the places people like, based on the number of panoramio photos at each place in the world. The dark areas have few photos, the red areas have more and the yellow areas have a large number of photos geotagged. The hottest places have markers linking photos, streetview, wikipedia, wikivoyage, foursquare and google plus articles about the site. The place names are selected by the w
好きな画像をマーカーとして表示させる
Google MAPS API V3 の google.maps.Marker で、既定のアイコンを使わずに独自の画像を表示させるサンプルプログラム。 <script type="text/javascript" src="//maps.google.com/maps/api/js?sensor=false"></script> <div id="map" style="width: 400px; height: 280px;"></div> <script type="text/javascript"> // 地図 var map = new google.maps.Map(document.getElementById("map"), { zoom: 14, center: new google.maps.LatLng(35.710139, 139.810833), scrollwhe
Googleマップをイラストマップみたいにしたい。
サイト制作において、アクセスマップなどの地図の表示はどうしてますか？「Google Maps API」を利用したり、ちょっとデザインにこだわりたい時にはイラストに描き起こしたりしてるんじゃないでしょうか。 今回は、Google マップをちょいとカスタマイズすれば、まるでイラストマップみたいに見せることができるんだぜ！というお話です。 記事中に出てくる画像は2012.3現在のもののため、現在のGoogle Maps APIでの表示とは異なりますので注意です…X(。 リンク切れしていたところを、なるべく近い内容の存在するページにリンクし直しました（2015.7.20追記）。 まずはしっかり抑えておきたい「Google Maps APIの基本」から。 基本をすっ飛ばして早速カスタマイズしたい方はこちら↓。 Google Maps APIの基本 Google マップはGoogle API キーを発
Overview | Maps Static API | Google for Developers
Send feedback Overview Stay organized with collections Save and categorize content based on your preferences. The Maps Static API lets you embed a Google Maps image on your web page without requiring JavaScript or any dynamic page loading. The Maps Static API service creates your map based on URL parameters sent through a standard HTTP request and returns the map as an image you can display on you
ウェブリブログ：サービスは終了しました。
「ウェブリブログ」は 2023年1月31日 をもちましてサービス提供を終了いたしました。 2004年3月のサービス開始より19年近くもの間、沢山の皆さまにご愛用いただきましたことを心よりお礼申し上げます。今後とも、BIGLOBEをご愛顧賜りますよう、よろしくお願い申し上げます。 ※引っ越し先ブログへのリダイレクトサービスは2024年1月31日で終了いたしました。 BIGLOBEのサービス一覧
Google Maps API で簡単にマーカーを変える方法 « Stop Making Sense
はじめに 今回は Google Maps API のマーカーを、Google Chart API を使ってお手軽に変更する方法を紹介します。 デフォルトのマーカーに対し、色や文字を変える程度であれば、画像ファイルを用意しなくても簡単にマーカーを差し替えることが出来ます。 デフォルトのマーカーを使うときは、次のようにマーカーを作成します。 (デフォルトのマーカーを使う) var marker = new google.maps.Marker({ position: myLatLng, map: map }); これで作成すると、次のようなマーカーが表示されます。 (出典は Google Maps Javascript API V3 Examples の marker-simple.html) また、マーカーに独自の画像を指定することも出来ます。 (画像ファイルを指定) var marker
Google マップのピンを変えてみる
今回はgoogleマップのピンの変更方法します。 デフォルトで用意されているピンはこれ（各色有） このピンを自分の好きなデザインに変更することができます。 カスタムアイコンを表示するには、jpg・gif・bmp・pngが使用でき、64×64ピクセルを超えるアイコンは縮小されます。 アイコンの画像自体はgoogleマップに保存されない為、リンク先の画像を変更した場合や削除した場合はアイコンも変化します。 今回使用するのはOkinavitaでも使用しているピン。 ※ご使用の際は右クリックで「名前を付けて画像を保存」を選び、ご自分のパソコンに保存した上でご使用ください。 上記のピンを使いグーグルマップを作成してみました。 より大きな地図で 沖縄桜まつり を表示 ピンの追加方法は簡単。 1.まずグーグルマップを開きます。 2.画面左上の「マイマップ」を選びます。 3.「新し
Googleマップをもっと簡単に使おう·gmaps.js MOONGIFT
gmaps.jsはGoogleマップを使いやすくするJavaScriptライブラリです。 GoogleマップではJavaScriptのAPIも提供されていますが、使い勝手が良いとは言えません。活用していくならばもっと使いやすいgmaps.jsを利用しましょう。 まず普通の表示。GMapsに位置情報を渡すだけです。超簡単。 イベントも取れます。クリックやドラッグなど様々なイベントが使えます。 マーカーの追加も分かりやすいです。マーカーにイベントをつけるのも簡単。 HTMLコンテンツを表示するのも手軽です。 HTML5の位置情報取得にも対応しています。 住所を検索してジオコーディング。 ドローです。指定は大変ですが。 オーバーレイ表示です。 ルート検索です。二つの位置情報を渡すだけです。 ルート検索をさらにポイントごとに表示していくこともできます。 こちらは静的なマップ。画像として表示できます
APIと少しのjQueryコードでGoogle Mapの地図の色を変更する
Google MapのデザインをjQueryで変更する為のメモ書き。Google Map APIとjQueryでGoogle Mapの色合いを変更し、オリジナルのマーカーを付けてみます。こうする事で、既存デザインに合わせたGoogle Mapが出来ます。 今後必要になりそうだったので調べ物をしたついでにメモ書きです。デザインを変更、というと語弊がありますけど、好みの色に変えてみます。 ゴール↓ こんな感じのをjQueryでやろう、みたいな内容です。特に目新しい情報では無いですが。 なんかシャドウ変になっちゃった・・色やマーカーだけでもWebサイトで使用している色にあわせれば地図だけ浮いてしまうような事も無くなるんじゃないかなと思います。 ジオコーディングリクエスト<script type='text/javascript' src='http://ajax.googleapis.com/a
jQuery MobileでGoogleMap APIを使ったサンプルがMITライセンスで公開されてた
なかなかいいサンプルだったのでシェア。 jQuery MobileでGoogleMap APIを使った サンプルがオープンソースで公開されて いました。ストリートビューなども表示する ことが可能です。興味の有る方はチェック してみては。 スマフォにGoogleMapを表示させるのに、Google Maps JavaScript API V3が必要みたいですが、これをスマフォ対応を簡略化するjQueryプラグイン、jQuery Mobileで使おう、というもの。 jquery-ui-map GoogleMap APIをjQuery Mobileで使ったサンプルです。jquery-ui-mapというプラグインも使用しています。このサンプルはMITライセンスでソースが公開されていますよ。 以下、デモのキャプチャです。 iPhone iPhoneでの実装状態です。 ランドスケープ時も自動で横幅をあ
Googleマップを使った経路案内も一瞬で実装できるjQueryプラグイン「jGmaps」:phpspot開発日誌
jGmaps | jQuery Plugins Googleマップを使った経路案内も一瞬で実装できるjQueryプラグイン「jGmaps」 必要なライブラリを読み込んで、次のようにjgmapsメソッドを呼び出すとGoogleマップによる経路案内の地図と文字による案内情報が出ます。 $('#mapa').jgmaps( { width: 300, height: 300, directions:{ address: ['東京都新宿区', '東京都港区'], usePanel: true, panelId: 'panelDirections' } } ); 次のように、経路が地図に表示されます。 文字による案内情報も表示できます。 会社案内や会場案内なんかもこれで速攻実装できそうですね。 ダウンロードできるサンプルをいじくってみましょう。 地名に日本の場所を漢字で使う場合、文字コードはUTF-
Google Maps API を使って、地図のカラーバリエーションを楽しもう。
メディア関係者向けお問い合わせ先 メールでのお問い合わせ: pr-jp@google.com メディア関係者以外からのお問い合わせにはお答えいたしかねます。 その他すべてのお問い合わせにつきましては、ヘルプセンターをご覧ください。
jQueryでGoogle Mapsを簡単に扱えるようになるプラグイン『Google Maps jQuery Plugin』 - IDEA*IDEA 〜 百式管理人のライフハックブログ
ドットインストール代表のライフハックブログ
Google Maps API で遊ぶ - PukiWiki
FrontPage _ GoogleMaps を使って作ったページ 僕が作ったgooglemaps を使ったページです。 草加走ろう会30周年記念24時間走 ジョギングコース作成ページ ↑ _ TIPS マーカーが増えると極端に重くなります。マーカーを配列にいれて、 表示範囲だけ表示するようにすると軽くなります。 var bound = map.getBounds(); var max = past_A.length; var count = 0; for (var i = 0; max > i; i++) { var point = past_A[i].getPoint(); if (bound.contains(point)) { map.addOverlay(past_A[i]); disp_mark[count] = past_A[i]; count++; } } ↑ _ ジョ
本当はすごい、知られざるGoogle Maps APIたち!!
「商業利用もOK！ Google Mapsについて知りたいこと」に続くGoogle Mapsインタビューの後編は、数多く存在するGoogle Maps関連のAPIや機能のうち、あまり知られていないものや新しいものをグーグルのソフトウェアエンジニア、淺川浩紀さんに聞いた。 Code Playgroundでオンライン編集 まずは、即効性のあるものからいこう。 Googleが持つ多くのAPIは、Webブラウザ上からJavaScriptによって呼び出せる。JavaScriptはコンパイルの手順なしに書けば実行できるので手軽である。しかし、だからAPIを試すのも簡単だとは限らない。例えば、Google Maps APIなら正しいGoogle Maps APIキーを用意したり、適切な文書にプログラムを埋め込んだりする作業を行い、それをWebブラウザで開かねばならない。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Google Maps API無償版のポリシー変更、猶予期間が10月12日で終了、地図が突然表示されなくなる可能性も 
dfltweb1.onamae.com – このドメインはお名前.comで取得されています。
