googlemap api で自分の好きな場所に好きなマーカーを入れる

20130426_01

画像の切り抜き方が雑でフチの白い所出てる。


googlemap APIメモ。V3はキー要らなくなったんですね。
今日はこんな感じで地図を入れ込んでみたいと思います。

head内にjavascriptを埋めます。

[javascript]
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type=’text/javascript’>

var flagIcon_front = new google.maps.MarkerImage("マーカー画像のURL");
flagIcon_front.size = new google.maps.Size(111, 92);
flagIcon_front.anchor = new google.maps.Point(78, 98);

var flagIcon_shadow = new google.maps.MarkerImage("マーカーのシャドウ画像のURL");
flagIcon_shadow.size = new google.maps.Size(120, 54);
flagIcon_shadow.anchor = new google.maps.Point(65, 55);

var mapCanvas;
function intialize() {
//Create a map
mapCanvas = new google.maps.Map(document.getElementById("map_canvas"), {
center : new google.maps.LatLng(座標を入れる),
zoom : 17,
mapTypeId : google.maps.MapTypeId.ROADMAP,
navigationControlOptions: {
style: google.maps.NavigationControlStyle.ZOOM_PAN
}
});
var marker = new google.maps.Marker({
position : new google.maps.LatLng(座標を入れる),
map: mapCanvas,
icon: flagIcon_front,
shadow: flagIcon_shadow,
});
}
google.maps.event.addDomListener(window, "load", intialize);
</script>
[/javascript]

htmlの地図を出したい所に下記ソースを入力。
座標はこちらから取得できます。
Google マップ 座標

サイズはお好きにどうぞ。
ちなみに余談ですが、widthはウィズ。heightはハイトって読むらしいです。
ウィトゥスっても読むって書いてあったりしたけどなあ。いずれにせよ読みにくいことは間違いないです。

[html]
<div id="map_canvas" style="width: 500px; height: 400px;"></div>
[/html]

参考サイト:
googlemap活用講座
googlemap入門

%d人のブロガーが「いいね」をつけました。