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」プラグインがやってくれます。サイトに地図をサササッと簡単に挿入できるので便利！
スポンサーリンク
デモとソースをご覧ください。
ソース（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>
スポンサーリンク