jQuery Google Map

jQuery Google Map
Google Mapsの地図を簡単に表示「jQuery Google Map」
Google Mapsの地図を簡単に表示するプラグイン「jQuery Google Map」を紹介します。
jQueryプラグイン「Google Map」
jQueryプラグイン「jQuery Google Map」は、「Google Maps javascript API」を利用して、地図を描画するプラグインです。
「Google Maps javascript API」の操作を全く知らなくても大丈夫！
操作部分の全ては「jQuery Google Map」プラグインがやってくれます。
サイトに地図をサササッと簡単に挿入できるので便利！

webkaru.net
https://webkaru.net/jquery-plugin/jquery-google-map/









デモとソースをご覧ください。
「jQuery Google Map」のデモ
ソース（HTML + jQuery）
＜!DOCTYPE html>
＜html>
＜head>
＜meta charset='utf-8'>
＜meta name="description" content="jQuery Google Mapのデモでーす。">
＜title>jQuery Google Map - jQueryプラグインまとめのカルマ
＜script src="http://code.jquery.com/jquery-2.0.0.js">
＜script type="text/javascript" src="https://www.google.com/jsapi">
＜script type="text/javascript">
    google.load("maps", "3.4", {
      other_params: "sensor=false&language=jp"
    });
＜/script>
＜script src="src/jquery.googlemap.js">
＜/head>
＜body>
＜p>＜a href="https://webkaru.net/jquery-plugin/jquery-google-map/">「jQueryプラグインまとめ」に戻る

＜h1>TOKYO 2020
＜div id="map" style="width: 800px; height: 600px;">
＜script type="text/javascript">
  $(function() {
    $("#map").googleMap({
      zoom: 15, // Initial zoom level (optional)
      coords: [35.681382, 139.766084], // Map center (optional)
      type: "ROADMAP" // Map type (optional)
    });
  })
＜/script>
＜/body>
＜/html>

webkaru.net
https://webkaru.net/jquery-plugin/jquery-google-map/















Google Map を簡単お洒落にカスタマイズ！「Styled Map Wizard」使ってみた。 | バシャログ。
地図カスタマイズのコツ
カスタマイズのコツとしましては、
デフォルトのgooglemapを見て、いる要素といらない要素、サイズ、ズームレベル、色など、Styled Map Wizard で作るより前にちゃんと決めておく。
Styled Map Wizard を開いて、文字やアイコンなど不要となりえる要素を先に全て非表示にしたものを元に、
HTML、CSS、JSの３つを、地図の座標を入れた状態で先に組み立てる。
Styled Map Wizard に戻り、必要なものだけ表示(変更)させ、その部分だけjsへコピペし、実際のプレビューはHTML上で行う。
というのがコツかと、作ってみて思った点です。
ちょっと面倒でも、このひと工夫でサイトの統一感がいっきに増す、Google map のデザイン変更。
皆さんも一度試してみてください。オリジナル感が出せるのでハマるとちょっと楽しいですよ！

バシャログ。
http://bashalog.c-brains.jp/13/02/12-104000.php

<----------api file="" nbsp="" p="">