今日の人気記事

  1. 入力フォームのフォーカスを自動でタブ移動「Autotab」

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

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