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

| UdemyでHTML,CSSを編集できる基礎知識を3時間で学べる講座を実施中

受講者数が3,200名を超えました。評価4.4（5段階）。

当社が運営する「学びBAR」で紹介していますが、初めての方や、コーダーを目指していない方でも、たまにHTMLの編集が必要になる場面がある人はHTMLの基礎的なルールを知っておけば、いざという時役立ちます。語学のように覚えなくては訳せない熟語や構文な無く、HTMLのルールは単純です。
そのルールをきちんと理解してけば今やタグやスタイルについてはWEBに丁寧な解説がありますので、タグやスタイルを全部覚える必要なんて無いのです。
基本のルールさえ身につけておけば、ちょっと時間はかかるかもしれませんが編集できるようになります。

Udemyでは、時々お得に講座を申し込めるキャンペーンを実施中です。

通常当講座は24,800円で受講できますが、Udemyのキャンペーン期間は格安で申し込めるときがあります。

2024年8月29日までは当講座は1.300円で申し込めます。Udemyは受講する期間の設定がありませんので。一度購入した講座はいつでも受講することができるのが良いところ。
キャンペーン期間中に学びたい講座を格安で受講登録しておけば、いつでも自由な時間で学ぶことができます。

当講座もキャンペーン時時期には1,300円とか95%OFFになることがあります。

キャンペーン時期でない場合は「学びBAR」のサイトからお問い合わせいただければ1,300円で受講できるクーポンコードをお送りいたします。

詳しくはこちら >>

| 個人の公式サイト作りました.

Hilo◯

今、広めたいこと、気がついたこと、発見したこと、興味のあることを書き連ねているサイトです。

いろんな仕事しています。個人的に色々考えてることや日々のつぶやきや発見、考察など会社のサイトでは関連のないことを沢山書きたくて自分個人のサイトを作ってみました。

Hilo 公式サイト

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

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

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

“

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

“

返信を残す

■ Categories

Archives

| UdemyでHTML,CSSを編集できる基礎知識を3時間で学べる講座を実施中

受講者数が3,200名を超えました。評価4.4（5段階）。

Udemyでは、時々お得に講座を申し込めるキャンペーンを実施中です。

| 個人の公式サイト作りました.

Hilo◯

自社開発製品サイト、運営サイト

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

| UdemyでHTML,CSSを編集できる基礎知識を3時間で学べる講座を実施中

受講者数が3,200名を超えました。評価4.4（5段階）。

Udemyでは、時々お得に講座を申し込めるキャンペーンを実施中です。

| ​個人の公式サイト作りました.

Hilo◯

自社開発製品サイト、運営サイト

Creative Works

Graphic Design

Sales Promotion Tools

WEB Design

Movie

Column

Biz Tips

WEB Marketing

OWNER'S BLOG

Other

Products

About us

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

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

| 個人の公式サイト作りました.

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