熊本のﾎｰﾑﾍﾟｰｼﾞ制作会社 | 株式会社ﾃﾝｼﾞﾝ
担当者ﾌﾞﾛｸﾞ
11-18 (Wed) 09:43
Googleﾏｯﾌﾟを手軽に貼り付けられるｽｸﾘﾌﾟﾄ
ｺﾒﾝﾄ(2)/ﾄﾗｯｸﾊﾞｯｸ(0)
hljs.initHighlightingOnLoad();
【おすすめ無料ｿﾌﾄ･ﾌﾘｰｿﾌﾄ 第9回】
今週はｿﾌﾄの紹介ではなく､便利なｿｰｽｺｰﾄﾞのお話です｡
ﾎｰﾑﾍﾟｰｼﾞ上で会社の地図をのせることは､もはや定番ですよね｡
ｴｺﾍﾟｰｼﾞでは｢ﾌﾟﾛﾌｨｰﾙ｣のﾍﾟｰｼﾞで､住所を入力するだけで地図を貼り付けることが出来ますが､
ひとつしか登録できないので､複数紹介しなければいけない時に困った人も多いかと思います｡
またﾌﾟﾛﾌｨｰﾙ以外のﾍﾟｰｼﾞに地図を貼り付けたいとのご要望もありましたので､
なるべく簡単にﾍﾟｰｼﾞに地図が貼れる方法を考えてみました｡
<script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script> <div id="map_canvas" style="width: 500px; height: 292px;"></div> <script type="text/javascript"> google.maps.event.addDomListener(window, 'load', function() { var arr = new Array(32.79367,130.73831); //中心の緯度経度を入力 var mapdiv = document.getElementById('map_canvas'); var myOptions = { zoom: 19, center: new google.maps.LatLng(arr[0], arr[1]), mapTypeId: google.maps.MapTypeId.ROADMAP, scaleControl: true }; var map = new google.maps.Map(mapdiv, myOptions); var marker = new google.maps.Marker({ position: new google.maps.LatLng(arr[0], arr[1]), map: map }); }); </script>
まずは､地図をはりたい場所に上記のｿｰｽをｺﾋﾟｰしてください｡
(ｴｺﾍﾟｰｼﾞの場合は､ｿｰｽﾓｰﾄﾞにしてから貼り付けて下さい｡)
次にGoogleMap
で､表示させたいｴﾘｱまで移動してください｡
それから､地図の中心に表示させたい地点で右ｸﾘｯｸをしてください｡
こんな感じにﾒﾆｭｰが出てきますよね｡(例では｢村瀬海運ﾋﾞﾙ｣上で右ｸﾘｯｸしています)
｢この場所について｣を選択して左ｸﾘｯｸします｡
すると
上のﾃｷｽﾄｴﾘｱになにやら数字が表示されます｡
(実はこれが右ｸﾘｯｸしたところの緯度経度になります)
この数字を､ｿｰｽｺｰﾄﾞの5行目にある
var arr = new Array(32.800551,130.712625); //中心の緯度経度を入力
の部分のArrayの括弧内に書き換えてください｡
(例:緯度経度が｢10,200｣の場合はArray(10,200)という風に)
これだけでOKです｡
google.maps.event.addDomListener(window, 'load', function() {
var arr = new Array(32.800551,130.712625); //中心の緯度経度を入力
var mapdiv = document.getElementById('map_canvas');
var myOptions = {
zoom: 19,
center: new google.maps.LatLng(arr[0], arr[1]),
mapTypeId: google.maps.MapTypeId.ROADMAP,
scaleControl: true
};
var map = new google.maps.Map(mapdiv, myOptions);
var marker = new google.maps.Marker({
position: new google.maps.LatLng(arr[0], arr[1]),
map: map
});
});
こんな感じでどうでしょうか?
ちなみに､地図を大きさを変更するときは､ ｿｰｽの2行目の｢width｣｢height｣の数値を変更してください｡
戻る
(c)株式会社ﾃﾝｼﾞﾝ
