tamlog

主にwebのフロント回り たまに登山

GoogleMapsにマーカーと経路表示

スポンサーリンク

サンプル

<div id="map_canvas"></div>

別ページで開く 参考 https://developers.google.com/maps/documentation/javascript/?hl=ja

https://developers.google.com/maps/documentation/javascript/reference?hl=ja

https://sites.google.com/site/gmapsapi3/Home/services 基本 [javascript]

jsevents.gmaps();

var jsevents = {};

jsevents.gmaps = function(myLat, myLng) { //初期地図の位置デフォルト myLat = (myLat) ? myLat : 10.000000; myLng = (myLng) ? myLng : 100.000000; // 初期表示場所を設定 var intZoom = 12;

var myLatlng = new google.maps.LatLng(myLat, myLng);
var myOptions = {
    zoom: intZoom,
    center: myLatlng,
    mapTypeControl: false,
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    streetViewControl: false
}
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
markerObj = new google.maps.Marker({
    position: myLatlng,
    map: map,
    draggable: true
});

}​ [/javascript]

クリックされたら書き換える [javascript] $("#mya").click(function() { map.panTo(new google.maps.LatLng(10.000000, 100.000000)); });​ [/javascript] マーカー [javascript] var markerpath = "../images/map-maker.png";

function marks() { var markerImg = new google.maps.MarkerImage( markerpath, new google.maps.Size(30, 30)); var marker = new google.maps.Marker({ position: new google.maps.LatLng(000,000), map: map, icon: markerpath, title: タイトル }); } marks();​ [/javascript]