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編集できる社員を育成

3~6時間学ぶだけでサイトを編集できる社員を育成する出張セミナー承っています。
ホームページ運営は事業の基幹的な機能になりつつあります。
外部に依頼する仕事が増えても、社内にWEB知識を持っているスタッフがいた方が絶対に役に立ちます。
これからは社員の一人以上が必ずWEB知識を持っている人が絶対に必要になってきます。
1日の講習で社内にWEBの基礎的な知識を持っているスタッフを育てます。

詳しい内容はこちら >>

■ これからホームページを作成、リニューアル時、知っておくべき基礎知識講座 2時間

社内に1人は、必ず知っている人がいた方が良い、ホームページ作成・運営に必要な接続や設定環境、メール追加、ドメインのこと、これからのサイト制作を順調に無駄なく進めていくコツなど。制作や事業運営をお手伝いしてきたプロが、躓かないための基礎知識をお教えいたします。

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

■はじめてでもHTML,CSSを理解して短時間で加速度的に編集できるようになる
　Cre'ps HTML Study Method（クレップス HTML スタディ･メソッド）

■ HTML,CSSの基礎を分かりやすく理解 - 3時間

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

■ HTML,CSSの活用ステップアップ - 2時間

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

HTML,CSSの知識が無くても高度なサイトが作れ簡単に編集できるCMS『Weebly』でサイトをすぐ作って運営しよう

■ WordPressより簡単に作成・編集ができるWeeblyでサイトの基本操作を学べる講座です。

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

■ Weebly様々な機能や使い方、操作のコツを学んでさらに高度なサイトを構築出来るようになります

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

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

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

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

“

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

“

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

■ Categories

Archives

WEB編集できる社員を育成

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

■ これからホームページを作成、リニューアル時、知っておくべき基礎知識講座 2時間

■はじめてでもHTML,CSSを理解して短時間で加速度的に編集できるようになる
　Cre'ps HTML Study Method（クレップス HTML スタディ･メソッド）

HTML,CSSの知識が無くても高度なサイトが作れ簡単に編集できるCMS『Weebly』でサイトをすぐ作って運営しよう

自社開発製品ページ・運営サイトのご紹介

Creative Works

Graphic Design

Sales Promotion Tools

WEB Design

Movie

Column

Biz Tips

WEB Marketing

OWNER'S BLOG

Other

Products

About us

アンジュール株式会社
【クレップスデザイン･ラボ】

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

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

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

“

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

“

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

■ Categories

Archives

WEB編集できる社員を育成

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

■ これからホームページを作成、リニューアル時、知っておくべき基礎知識講座 2時間

■はじめてでもHTML,CSSを理解して短時間で加速度的に編集できるようになる Cre'ps HTML Study Method（クレップス HTML スタディ･メソッド）

HTML,CSSの知識が無くても高度なサイトが作れ簡単に編集できるCMS『Weebly』でサイトをすぐ作って運営しよう

自社開発製品ページ・運営サイトのご紹介

Creative Works

Graphic Design

Sales Promotion Tools

WEB Design

Movie

Column

Biz Tips

WEB Marketing

OWNER'S BLOG

Other

Products

About us

アンジュール株式会社【クレップス デザイン･ラボ】

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

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

■はじめてでもHTML,CSSを理解して短時間で加速度的に編集できるようになる
　Cre'ps HTML Study Method（クレップス HTML スタディ･メソッド）

アンジュール株式会社
【クレップスデザイン･ラボ】