今日の人気記事

  1. レスポンシブなメニューを作成「MeanMenu」
  2. 数値のカウントアップ - さまざまなフォーマットに対応「Counter-Up」

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>
スポンサーリンク

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