宮崎ITブログ

(有)共栄産業[宮崎県宮崎市]でのIT関連技術のPRおよび社内での備忘録の蓄積を目的にブログを運用させていただきます。その中で、ほんのり皆さんの役に立つこともあるといいなぁ なんて思ってます。コメントは遠慮なくどうぞ〜♪

<< Ergo 525V Laser のドライバ探し | main | サイトリンクをコントロール|googleウェブマスターツール >>
駐車場マップへ全画面表示と現在地
全画面表示できるようにと、現在地表示ができるように修正しました。

今回はえらいハマった、時間にして延べ時間 約12時間!!!!!!くぅぅぅぅぅ><

賃貸物件詳細ページ(例)ルミエール加納の全画面表示は全画面フルスクリーン表示を切り替えるボタンを地図内に実装するの通りやっておかげでサクッと対応完了。

ということで、別系統で作成されていた駐車場マップ|宮崎市の地図も同様に全画面表示しときましょうかと安易に考え対応。と、と、と、ところが、ぜんぜんうまくいかない・・・

うまくいかない時点で、chromeの「F12」の画面でデバックすればいいものを・・・直感で思いつく、ところを修正してダメ、修正してダメ、修正してダメと悪いループへ・・・

で、落ち着いてchromeの「F12」で「Consol」画面を見たところ、「Uncaught ReferenceError: $ is not defined」なるメッセージあり。「なんか変数定義されていない」みたいなことかなと、その行は

$(controlUi).on("mouseenter", function () {


と記述されていました。ふむ、「mouseenter」ってなんじゃらほいと検索すると、jQueryの変数ぽいことが判明!!!HTMLを見なおしたところ、jQueryが読み込まれてませんでした><

サクッと対応できたHTMLにはすでに何かの用途で「jquery」が利用されていたのでたまたまうまくいっただけというオチ・・・・ちゃんちゃん ご注意を!




これまたハマる人いたら大変だろうから、メモしておきます。

すでに設置してあるGoogleMapを全画面表示にする方法


1.http://www.doogal.co.uk/FullScreen.phpよりFullScreenControl.jsをダウンロードしてマイサーバへアップ。
2.次のようにHTMLにFullScreenControl.jsを実装する。
<script src="js/FullScreenControl.js" type="text/javascript"></script>

3.次のようにJavascript内に実装する。
map.controls[google.maps.ControlPosition.TOP_RIGHT].push(new FullScreenControl(map));

4.次のようにHTMLにjqueryを実装する。※jquery詳しくないけど、他のバージョンでも良いのではなかろうか。
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

5.Google地図に「Fullscreen」とか表示されているのを確認したら、FullScreenContrl.jsを修正すれば、「全画面表示」とか見栄えを変更できる。

参考URL

| 2016.02.14 Sunday | IT技術 | 19:04 | comments(0) | trackbacks(0)
コメント
コメントする









この記事のトラックバックURL
http://it.m-kyoei.com/trackback/1196027
トラックバック
Twitter Updates

ジオターゲティング
SELECTED ENTRIES
CATEGORIES
ARCHIVES
RECENT COMMENT
RECENT TRACKBACK
LINKS
PROFILE