MovableTypeやJSに関する私的メモの様なモノです。 その中でも皆さんの参考になれば幸いです。 本サイトの管理者は、これらの情報をあなたが利用することによって生ずるいかなる損害に対しても一切責任を負いません。
2015年7月22日
座標投稿でGoogleMapを表示させる
ラベル:
CustomField,
js,
mt
MTでGoogleMapを表示させるには、通常エディタで埋め込みソースをいれますが
カスタムフィールドを使って、指定サイズのマップを表示させる方法です。
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
<script type="text/javascript">
/* 地図の初期化 */
function initialize() {
/* 緯度・経度:日本, 表参道駅(東京)*/
var latlng=new google.maps.LatLng( カスタムフィールド名 );
/* 地図のオプション設定 */
var myOptions = {
zoom: 15, /*初期のズーム レベル */
center: latlng, /* 地図の中心点 */
mapTypeId: google.maps.MapTypeId.ROADMAP /* 地図タイプ */
};
/* 地図オブジェクト */
var map=new google.maps.Map(document.getElementById("map_canvas"), myOptions);
/* ★マーカーオブジェクト */
var marker = new google.maps.Marker({
position: latlng, /* マーカーを立てる場所の緯度・経度 */
map: map, /*マーカーを配置する地図オブジェクト */
title: 'マーカー名'
});
}
/* ロード時に初期化 */
google.maps.event.addDomListener(window, 'load', initialize);
</script>
<div id="map_canvas"style="width : 600px; height : 400px;"></div>
これで横600ピクセル、縦400ピクセルのGoogleMapが表示されます。
座標指定した位置にマーカーが表示され、そこを中心で指定サイズで表示されます。
登録:
コメントの投稿 (Atom)
0 件のコメント:
コメントを投稿