今日の人気記事

  1. 画像ポップアップ・スライドショー「Lightbox 2」
  2. ExcelのようにTableが編集できちゃう「Handsontable」
  3. 簡単実装!シンプルなアコーディオンメニュー「Accordion」
  4. テーブルのヘッダー(th)がついてくる「Mr.StickyTableHeaders」

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」プラグインがやってくれます。サイトに地図をサササッと簡単に挿入できるので便利!

スポンサーリンク

デモとソースをご覧ください。

「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プラグインまとめのカルマ</title>
<script src="http://code.jquery.com/jquery-2.0.0.js"></script>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
    google.load("maps", "3.4", {
    	other_params: "sensor=false&language=jp"
    });
</script>
<script src="src/jquery.googlemap.js"></script>
</head>
<body>
<p><a href="https://webkaru.net/jquery-plugin/jquery-google-map/">「jQueryプラグインまとめ」に戻る</a></p>

<h1>TOKYO 2020</h1>
<div id="map" style="width: 800px; height: 600px;"></div>
<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>
スポンサーリンク

関連記事(一部広告含む)