iOS版のGoogle Mapの紹介

HOME > 事業パワーアップコラム > ウェブを活用して事業拡大に役立つコラム > WEBマーケティングミニ知識

iOS6でGoogle Mapをすぐに使えるようにする方法

9/27/2012

iOS6のマップアプリに『Google Map』を追加して、今までどおり便利に地図検索できる方法

iOS 5のマップ（左）とiOS 6のマップ

今のところ表示がホラーだらけでお困りのiOS6アップ組の方々に朗報！
もう、これで迷うことはなくなります。Google Mapをブラウザではなく、アプリとして使用できちゃう方法です！

Google Mapを見慣れているとAppleMapを見た時スカスカに見えますよね。
だけど、YAHOOロコと提携しているので、実は結構情報が沢山出てくる仕掛けもあるのですが、道に迷った時や、建物とかお店を直接探す時はやっぱり慣れ親しんで、正確なGoogle Mapを頼りにしたいです。って人向けに、
Google Mapのアプリをもう一度登録してしまう方法です。

SafariやChromeのブラウザで見るのではなく、Google Mapをアプリとしてアイコンを画面に表示させてすぐに使用できる方法です。

もし、この画面をPCで見ていたら、左のQRコードをiPhoneで読み込んでこのページを開いてください。

さあ、ではではWeb版Googleマップをフルスクリーン表示にする方法を紹介です。

iPhoneまたはiPadでこのページを開いて、以下のコード部分を長めにタップしてコード部分のみコピーします。

“

data:text/html;charset=UTF-8,<title>GoogleMaps</title><meta name="apple-mobile-web-app-capable" content="yes"><link rel="apple-touch-icon" href="http://farm5.staticflickr.com/4035/4564840873_85c02262e9_z.jpg"><script>if(window.navigator.standalone){location.href="https://maps.google.co.jp/";}else{document.write("ホーム画面に追加")}</script>

コピーしたら、iOS6のSafariを起動させます。
上部の検索用の枠にコピーしたコードをペーストします。

SafariのURLバーにコピーしたコードを貼り付けられたら「開く」をタップします。
そうすると以下のような画面が表示されます。

Safariのツールバー中央にあるアイコンをタップしてメニューを表示させます。

ここで「ホーム画面に追加」をタップします。

「ホームに追加」画面が表示されます。アイコンと名称を確認して右上の「追加」をタップ。

これでホーム画面にGoogleマップフルスクリーン版のアイコンが登録されました。
めでたし、めでたし。

このアイコンをタップすると......。

GoogleマップのWeb版が起動するというわけです。

ブラウザーで見ることとの違いは下のバーがでない、ってことぐらいなのですが、ブラウザーを開いてブックマークを探して（沢山のブックマークがあると探すのが大変なんですよね）Google Map開くより、アプリのアイコンをワンタップで開ける方が便利ですよね。

早速、自分もアイコン登録してみましたが、登録しているアプリが多すぎるのか、登録したはずのアイコンが探せない…

アプリ検索で「Google Map」と打ち込んだら出てきました…

アプリのアイコン表示ってページ数に限りがあったっけ？？？

Google ストリートビューの追加について

以下のコードを同じ手順でアイコン表示させるとストリートビューも利用可能になる。

“

data:text/html;charset=UTF-8,<head><meta name=viewport content="initial-scale=1.0, user-scalable=no"><meta name=apple-mobile-web-app-capable content=yes><link rel=apple-touch-icon href="http://googlediscovery.com/wp-content/uploads/pegman.png"><title>StreetView</title><script src="https://maps-api-ssl.google.com/maps/api/js?v=3&sensor=true"></script><script>var geocoder;var map;function initialize(){geocoder = new google.maps.Geocoder();myOptions = {zoom:17,mapTypeId:google.maps.MapTypeId.ROADMAP,zoomControl:true,zoomControlOptions: {style: google.maps.ZoomControlStyle.LARGE,position: google.maps.ControlPosition.LEFT_BOTTOM}};map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);navigator.geolocation.getCurrentPosition(function(position){initialLocation = new google.maps.LatLng(position.coords.latitude,position.coords.longitude);map.setCenter(initialLocation);marker = new google.maps.Marker({map: map,position: initialLocation,animation: google.maps.Animation.DROP});});}function codeAddress() {var address = document.getElementById("address").value;geocoder.geocode({ "address": address}, function(results, status){if(status == google.maps.GeocoderStatus.OK) {map.setCenter(results[0].geometry.location);marker = new google.maps.Marker({map: map,position: results[0].geometry.location,animation: google.maps.Animation.DROP});}else{alert("見つかりませんでした");}});}</script></head><body onload="initialize()"><div><input id="address" value="現在地"><input value="検索" onclick="codeAddress()"></div><div id="map_canvas" ></div></body>

もう一度おさらい。

1. 上記のコードをコピー
2. Safariを立ちあげて上部の検索枠にコピーした上記コードをペースト
3. 下部のツールバー中央にあるアイコン（四角に右にカーブした矢印のアイコン）
4. アイコンが9つ並んだ表示の中央に表示されるホーム画面に追加アイコンを選んでタップ
5. 名称登録で「Streat View」と記入して完了！

これで、もう道に迷わなくても済みますね。

0 コメント

WEBマーケティングミニ知識

iOS6でGoogle Mapをすぐに使えるようにする方法

iOS6のマップアプリに『Google Map』を追加して、今までどおり便利に地図検索できる方法

“

Google ストリートビューの追加について

“

メッセージを残してください。

Categories

Archives

WEB編集できる社員を育成

3~6時間学ぶだけでサイトを編集できる社員を育成する出張セミナー承っています。

開催中のセミナー（開催場所：世田谷区上北沢）

Creative Works

Graphic Design

Sales Promotion Tools

WEB Design

Movie

Column

WEB Tips

WEB Marketing

OWNER'S BLOG

Other

Products

About us

株式会社クレップス

​WEBマーケティングミニ知識

iOS6でGoogle Mapをすぐに使えるようにする方法

iOS6のマップアプリに『Google Map』を追加して、今までどおり便利に地図検索できる方法

“

Google ストリートビューの追加について

“

メッセージを残してください。

Categories

Archives

WEB編集できる社員を育成3~6時間学ぶだけでサイトを編集できる社員を育成する出張セミナー承っています。

開催中のセミナー（開催場所：世田谷区 上北沢）

Creative Works

Graphic Design

Sales Promotion Tools

WEB Design

Movie

Column

WEB Tips

WEB Marketing

OWNER'S BLOG

Other

Products

About us

株式会社 クレップス

WEBマーケティングミニ知識

WEB編集できる社員を育成

3~6時間学ぶだけでサイトを編集できる社員を育成する出張セミナー承っています。

開催中のセミナー（開催場所：世田谷区上北沢）

株式会社クレップス