地図リンクをアプリで開くリンクタグ | ハックノート以下のリンクタグだとiPhoneの場合はAppleの地図アプリで開きます。 <a href="http://maps.apple.com/?q=35.658581,139.745433">地図アプリで開く</a> 以下のリンクタグの場合iPhoneでもgoogleマップアプリで開くことができます。 daddrを利用するとルートが検索できます。 <a href="comgooglemaps://?daddr=35.658581,139.745433">地図アプリで見る</a>
Google mapに複数のマーカー＆吹き出しにページ内リンクさせる方法
サイト内にGoogle mapを埋め込むことって最近増えましたよね。 いつも会社案内のアクセスの地図は、Google mapを使わせてもらってます。 マーカー（ピン）1つの場合、Google mapで生成される埋め込みコードをサイト内に設置すればいいんですが、仕事で複数のマーカーを設置したいという要望がありました。 APIを使えばできるとは耳にしたことあったんですが、設置したことないです。 さらに要望は増え、設置したマーカーに吹き出しをつけて、その吹き出しからリンク先に飛ぶようにしてほしいとのこと。 ん～そんなことできるのか？ 調べてみたらできるようです。 【googleマップ】リストをクリックすると、地図内のマーカーに移動し吹き出しを表示する を参考にして作成しました。 KLUTCHEさんありがとうございます！！助かりました。 参考にしたものは、ラベルと画像をいれていましたが、テキストの
Googleマップで応用編。
Google Maps JavaScript APIはJavaScriptで書かれてるので、JavaScriptを使えばいろいろ拡張できたりします:D。 ひとつの地図にマーカーをたくさん置いたり、1ページにたくさん地図を設置したり、地図と他のコンテンツを連動させたり、更新しやすくする工夫とか、いろいろおさらいしながらまとめてゆければと思います。 まずはマーカー周りのあれやこれやをまとめます！ 以下は目次です。クリックすると各項目へ移動します。 Google マップを表示する。 上下スクロールで地図をズームしないようにする マーカーを常に中央に表示する。 リサイズイベントを利用する リサイズし終わったら動かす 地図の大きさが変わった時だけ動かす 複数のマーカーを置く。 マーカーをふたつ置く マーカーをたくさん置く オリジナルアイコンをたくさん置く。 スマホでも綺麗に表示する 解像度が高いデバ
Google Mapを簡単にカスタマイズする｜スタッフブログ｜東京都新宿区のWeb制作会社 - ウェブラボ
ウェブラボ技術メモ第13回です。 今回はGoogle Mapを簡単にカスタマイズできるプラグイン「AxGmap」を使用してみたいと思います。 Google Mapって色々な機能を使えますが、わざわざJavaScriptを自分で書くのって面倒ですよね。。。 一度でも自分で書いたことのある人はそう感じると思います。 そんな時に、このプラグインがとても便利です!! では早速実装してみましょう。 下準備としては、HTMLのhead内で以下のようにGoogle Maps API、jQuery、jquery.axgmap.js を読み込みます。 <script type="text/javascript" src="https://maps.google.com/maps/api/js?sensor=false"></script> <script type="text/javascript" src
Google MapsのマーカーをRetinaディスプレイにサクッと対応させる - Qiita
Google Mapsのマーカー、Retinaディスプレイでそのままだと画像がボケちゃうのでその対策。 とは言えやることは、大きいサイズの画像を読み込む→縮小して表示させるといういつもの手順。でもまぁもう一度英文読むのとかイヤなので、マップ周りのコードごとまとめてストックしとこうそうしよう。 var myLatlng = new google.maps.LatLng(34.687571, 135.526239); function initialize() { var mapOptions = { zoom : 17, center : myLatlng }; var map = new google.maps.Map(document.getElementById('map'), mapOptions); var image = { url : 'icon.png', scaledSiz
GoogleMapsAPIのマーカーの大きさを地図の実際のサイズに合わせて拡大・縮小させるtips の巻 | _level0 - KAYAC Front Engineer Blog
googleMapsAPI関連の投稿三回目となりました、kijimaです。 ・はじめてのgoogleMapsAPI ・はじめてのGoogle Maps API のつづき 今回は、表示したマーカーのアイコン（MarkerOptions.iconに設定したDisplayObject）の大きさを変更してみようかと。 初期設定ですと、マーカーはどのズームレベルでも同じ大きさで表示されるのですが、地図の実寸に合わせてマーカーの大きさも変化させたい！という状況に遭遇したので、以下のように実装してみました。 Marker自体の大きさを変えるのではなく、Markerに設定したMarkerOptions.iconのDisplayObjectの大きさを変える、というのが当たり前ですが、大事なポイントです。 とりあえずは、地図のズームレベルの倍率をセットした配列を用意します。 static const ZOOM
【レスポンシブ対応】Google Mapにストリートビューを使った複数ルート（タブ切替）の道案内を設置｜Tips*Blog｜株式会社コプロシステム
こんにちは、コプロシステム・UXデザイン室の新人、顔が長いのをヒゲでごまかしている松山です。 まだ5月というのに真夏日が続いているおかげでビールがとても美味しいですね。 ちなみに私はビールが苦手です。 さて、5月になり新入社員の皆さんも仕事に慣れてきた頃で、営業職の皆さんはお客様先へ訪問することも多いかと思います。 訪問するお客様のホームページで交通アクセスなどのページを見てから現地へ行くことがほとんどかと思います。交通アクセスページで使われる地図も、一昔前はイラスト画像を使うことが主流でしたが、今ではGoogle Mapを使うことがあたりまえになってきています。 そんな交通アクセスのGoogle Mapにストリートビューの道案内が加わったらさらに親切だと思いませんか？ 今回は「Google Mapとストリートビューを使用した道案内の作り方」を説明します。 今回作成したサンプルはこちら 今
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
