Cre'ps design lab
  • Home
    • 制作費55,000円プラン
    • Cre'ps News & Topics
  • WEB制作・運営セミナー
    • cre'ps web instituteとは
    • 出張セミナー案内(3〜6時間)
    • 加速度的にHTMLが使えるようになるセミナー(3時間)
    • HTML5,CSS3活用 基礎復習&応用編・レスポンシブ他(2時間)
    • すぐにホームページが作れて簡単に編集・運営できる!(2時間)
    • Weebly Lesson.1-WEBデザイナーオススメのCMS(2時間)
    • Weebly Lesson.2-CMSフル活用で高機能サイトを構築(2時間)
    • 1日で自分で運営できるHPに作り変える方法を学ぶ
  • 事業パワーアップコラム
    • プロモーション思考で行こう!
    • WEBマーケティングミニ知識
    • マルチクリエイターの独言
  • デザインワーク
    • ウェブサイト・デザイン
    • グラフィック・デザイン
    • SP関連デザイン・プランニング
    • プロモーション・ムービー
    • キャラクター企画・制作
    • プロダクト・デザイン
  • 販売支援サポート・コンサルティング業務

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

HOME > 事業パワーアップコラム > WEBマーケティングミニ知識コラム

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

9/27/2012

0 コメント

 

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

Picture
iOS 5のマップ(左)とiOS 6のマップ
今のところ表示がホラーだらけでお困りのiOS6アップ組の方々に朗報!
もう、これで迷うことはなくなります。Google Mapをブラウザではなく、アプリとして使用できちゃう方法です!
Google Mapを見慣れているとAppleMapを見た時スカスカに見えますよね。
だけど、YAHOOロコと提携しているので、実は結構情報が沢山出てくる仕掛けもあるのですが、道に迷った時や、建物とかお店を直接探す時はやっぱり慣れ親しんで、正確なGoogle Mapを頼りにしたいです。って人向けに、
Google Mapのアプリをもう一度登録してしまう方法です。
Picture
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を起動させます。
上部の検索用の枠にコピーしたコードをペーストします。
Picture
SafariのURLバーにコピーしたコードを貼り付けられたら「開く」をタップします。
そうすると以下のような画面が表示されます。
Picture
Safariのツールバー中央にあるアイコンをタップしてメニューを表示させます。
Picture
ここで「ホーム画面に追加」をタップします。
Picture
「ホームに追加」画面が表示されます。アイコンと名称を確認して右上の「追加」をタップ。
Picture
これでホーム画面にGoogleマップフルスクリーン版のアイコンが登録されました。
めでたし、めでたし。

このアイコンをタップすると......。
Picture
GoogleマップのWeb版が起動するというわけです。
Picture
ブラウザーで見ることとの違いは下のバーがでない、ってことぐらいなのですが、ブラウザーを開いてブックマークを探して(沢山のブックマークがあると探すのが大変なんですよね)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 コメント

あなたのコメントは承認後に投稿されます。


返信を残す

    Access Octomono Masonry Settings
    WEBを活用して売上に繋げよう!
    WEB Marketing Blog Title

    ■ Categories

    すべて
    WEBデザインについて
    アプリの便利な使い方
    アプリ情報
    セキュリティ

    画像

    Archives

    4月 2022
    4月 2020
    3月 2019
    1月 2017
    2月 2014
    6月 2013
    10月 2012
    9月 2012
    7月 2012
    6月 2012

    RSSフィード

    画像
    画像
    画像

| 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 公式サイト

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

画像
鞄の中のノートPC,タブレットを
衝撃から護る超薄・超軽量
​インナーバッグ「iPag」
iPag詳細ページへ >>
画像
直感的にホームページが作成出来る
"Weebly"の操作方法が学べる
「Weeblyの教科書」
Weeblyの教科書サイトへ >>
画像
無料でWEBコードやWEB知識を学べる
オンラインスクール
​「学びBAR」
学びBARサイトへ >>
画像
- 良いものだけをお手元に -
オンラインネットショップ -
​「Pick-Upp!」
Pick-Upp! ストアへ >>

Creative Works


Graphic Design

広告デザイン制作
パンフレット制作
ブローシュア制作
ロゴ・マーク制作
パッケージ制作


Sales Promotion Tools

展示会・プレゼンボード制作

ショップ・イベントブース・ディスプレイデザイン
プロモーションツール制作
プロモーション企画・運営
ノベルティ・プレミアム企画


WEB Design

ポータルサイト制作
ショップサイト制作
企業サイト制作

Movie

プロモーション・ムービー制作

Column


Biz Tips

事業活性化 ビジネスヒント100
Cre'ps News

WEB Marketing

WEBを活用して売上に繋げる

OWNER'S BLOG

マルチクリエイターの独り言

Other


Products

Industrial
Novelty
Character
​
 

About us

About us
Privacy policy
Inquiry

Picture

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

お問合せ
「アイデアをカタチに」 Marketing & Design
初めて、当サイトへお越しいただいた方へ。Facebookの「いいね!」を押していただけたら嬉しいです!
いろいろな情報をアップした時、ニュースフィードに表示されるようになります。頑張って役立つ情報をアップしています。
1996-2021(c)Cre'ps design lab.  All rights reserved.
  • Home
    • 制作費55,000円プラン
    • Cre'ps News & Topics
  • WEB制作・運営セミナー
    • cre'ps web instituteとは
    • 出張セミナー案内(3〜6時間)
    • 加速度的にHTMLが使えるようになるセミナー(3時間)
    • HTML5,CSS3活用 基礎復習&応用編・レスポンシブ他(2時間)
    • すぐにホームページが作れて簡単に編集・運営できる!(2時間)
    • Weebly Lesson.1-WEBデザイナーオススメのCMS(2時間)
    • Weebly Lesson.2-CMSフル活用で高機能サイトを構築(2時間)
    • 1日で自分で運営できるHPに作り変える方法を学ぶ
  • 事業パワーアップコラム
    • プロモーション思考で行こう!
    • WEBマーケティングミニ知識
    • マルチクリエイターの独言
  • デザインワーク
    • ウェブサイト・デザイン
    • グラフィック・デザイン
    • SP関連デザイン・プランニング
    • プロモーション・ムービー
    • キャラクター企画・制作
    • プロダクト・デザイン
  • 販売支援サポート・コンサルティング業務