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 コメント

東京・桜上水で土日開催中のセミナー

■初心者OK! 最新のHP作成･楽々運営方法を学ぶ
2時間のセミナー

詳細･お申込みはこちら>>>

■初めてでもHTML,CSSを理解して使えるようになる3時間のワークショップ

詳細･お申込みはこちら>>

■プロが薦める,HTML,CSS知識0でもできる
WEB作成･運営方法（WordPressより簡単）

詳細･お申込みはこちら>>>

■簡単サイト･ブログ作成できる
Weeblyフル活用セミナー

詳細･お申込みはこちら>>>

このサイトはWeebly.comで作っています。
専門知識がなくても簡単に高度なデザインのサイトが作れるWeebly.comをぜひお試しください。

The Easiest Way to Create a Website. Weebly.com

WeeblyはWordPressより簡単にホームページを作れ、複数のブログページを追加したりストア機能も追加できる優れたCMSです。
現在、CMSを活用して事業に役立つHPづくり、運営方法を学べるセミナー、Weeblyの操作方法の案内や活用方法のセミナーを開催しています。各種SOHO,中小企業向けに事業に役立つWEB活用法のセミナーに参加されてWEBを強力な営業ツールとして育てましょう！

Weeblyの使い方を無料で学べるサイトも当社が提供しています。

Weeblyの教科書サイトへ

独創の次世代保護ガラス

iPhone用高品質の保護ガラス
ショッピングサイト

株式会社クレップス

お問合せ

「アイデアをカタチに」 Marketing & Design

初めて、当サイトへお越しいただいた方へ。Facebookの「いいね！」を押していただけたら嬉しいです！
いろいろな情報をアップした時、ニュースフィードに表示されるようになります。頑張って役立つ情報をアップしています。

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時間学ぶだけでサイトを編集できる社員を育成する出張セミナー承っています。

株式会社クレップス