Google MapsをWEBサイトに表示させることはよくあることだと思います。
住所が固定の場合は、Googleマップから住所を検索し、HTMLコードを取得すれば簡単に組み込むことができますが、
入力された住所からGoogle Mapsを出力したい場合、「jquery.gmap3」を使用すれば簡単に住所からGoogleマップを出力することが可能です。
下記に住所からGoogle Mapsを出力した時の使用方法をメモします。
■ 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を出力できるのでとても便利です。
他にもマーカーオプションなど設定の方法が色々あるので、とても使いやすいと思います。
