jQuery:jquery.gmap3を使用して、住所からGoogle Mapsを出力

Google MapsWEBサイトに表示させることはよくあることだと思います。

住所が固定の場合は、Googleマップから住所を検索し、HTMLコードを取得すれば簡単に組み込むことができますが、
入力された住所からGoogle Mapsを出力したい場合、「jquery.gmap3」を使用すれば簡単に住所からGoogleマップを出力することが可能です。

jquery_gmap3

下記に住所からGoogle Mapsを出力した時の使用方法をメモします。


jquery.gmap3

jquery.gmap3

Google Maps API V3」を使用したプラグイン。
住所や座標からGoogleマップを表示することが可能です。


「jquery.gmap3」使用方法

JS

「Google Maps API」と「jQuery」を読み込みます。

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>

ダウンロードしたプラグインを呼び出し、下記のコードを記述します。
「address」の箇所に出力したい場所の住所を記述します。
「latitude」と「longitude」は座標で指定する場合記述します。
二つ記述した場合は「address」の方が優先されるそうです。

<script type="text/javascript" src="/js/jquery.gmap3.js"></script>
<script type="text/javascript">
$(function() {

    $("#gMap").gmap3({
        address: '東京都港区台場',
        latitude: 35.630497,
        longitude: 139.778471,
        zoom: 12,
        navigationControl: true,
        mapTypeControl: true,
        scaleControl: true,
        markers: [{
            address: '東京都港区台場',
            latitude: 35.630497,
            longitude: 139.778471,
        }]
    });

});
</script>

マーカーを指定する場合は「markers」に指定したい場所を記述します。


CSS

表示するGoogle Mapsの幅、高さを指定します。

<style type="text/css">
div#gMap {
    width: 400px;
    height: 300px;
}
</style>

HTML

表示したい箇所に下記のコードを記述します。

<div id="gMap"></div>

住所や座標からGoogle Mapsを出力できるのでとても便利です。
他にもマーカーオプションなど設定の方法が色々あるので、とても使いやすいと思います。

  • このエントリーをはてなブックマークに追加

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です