地図を作るとき、何よりもまず緯度・経度を求めないと始まらない。
ドラッグ&ドロップできるアイコン(Draggable Marker)で getPoint() メソッドを利用すると、実に便利。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>Lat, Lng</title>
<script src="http://maps.google.com/maps?file=api&v=2.s&key=「キー」"
type="text/javascript"></script>
</head>
<body onunload="GUnload()">
<form action="#"><p><input type="text" id="location" value="" /></p></form>
<div id="map" style="width: 500px; height: 400px;"></div>
<script type="text/javascript">
//<![CDATA[
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map"));
map.setCenter(new GLatLng(35.69,139.70), 9);
map.addControl(new GMapTypeControl(true));
map.addControl(new GSmallMapControl());
var point = new GLatLng(35.69,139.70);
var marker = new GMarker(point, {icon:G_DEFAULT_ICON, draggable: true, bounceGravity:1});
map.addOverlay(marker);
marker.enableDragging();
GEvent.addListener(marker, "drag", function(){
document.getElementById("location").value=marker.getPoint().toUrlValue();
});
GEvent.addListener(marker, "click", function(){
marker.openInfoWindowHtml("ドラッグ&ドロップ");
});
}
//]]>
</script>
</body>
</html>
たんに緯度・経度を取得するだけでなく、Google の乗換検索(トランジット)に渡したり
<script type="text/javascript">
//<![CDATA[
if (GBrowserIsCompatible()) {
var to_htmls;
var from_htmls;
var map = new GMap2(document.getElementById("map"));
map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl(true));
map.setCenter(new GLatLng(35.706343,139.751801), 15);
var point = new GLatLng(35.706343,139.751801);
var marker = new GMarker(point, {draggable: true});
map.addOverlay(marker);
marker.enableDragging();
GEvent.addListener(marker, "click", function(){
point = marker.getPoint();
var html = 'ドラッグ&ドロップで乗換検索<br><a href="javascript:tohere()">ここへ<\/a> - <a href="javascript:fromhere()">ここから<\/a>';
to_htmls = '<b>ここへ<\/b> - <a href="javascript:fromhere()">ここから<\/a>' +
'<br>出発地点:<form action="http://maps.google.co.jp/maps" method="get" target="_blank">' +
'<input type="text" size=20 maxlength=40 name="saddr" id="saddr" value="" />' +
'<input value="検索" type="submit">' +
'<input type="hidden" name="daddr" value="' + point.lat() + ',' + point.lng() +
'"/>';
from_htmls = '<a href="javascript:tohere()">ここへ<\/a> - <b>ここから<\/b>' +
'<br>到着地点:<form action="http://maps.google.co.jp/maps" method="get" target="_blank">' +
'<input type="text" size=20 maxlength=40 name="daddr" id="daddr" value="" />' +
'<input value="検索" type="submit">' +
'<input type="hidden" name="saddr" value="' + point.lat() + ',' + point.lng() +
'"/>';
marker.openInfoWindowHtml(html);
});
function tohere() {
marker.openInfoWindowHtml(to_htmls);
}
function fromhere() {
marker.openInfoWindowHtml(from_htmls);
}
}
//]]>
</script>
さらに、こんな使い方も
(メッセージ地図を新しいウィンドウで開く)
ところで Analytics は Google の他のサービスとデータ共有を設定できるようになった。広告等の効率的な運用に資するという目算なのか?
この japonyol.net のページビューは1日あたり約7000~8000程度(多くはカミサンのブログ)。このサンプル数からベネフィットのための最適化などを期待できるものなのか、たんにベンチマークなのか。
いつもお世話になってます。
今回 下記ページを参考に
http://japonyol.net/editor/mlb.html
http://kazusa.mobi/maps/ki.html テストページ作っています
アイコンを変更したのですがアイコンの大きさが変更できないのですが
どの様にしたら良いのでしょうか?
お忙しいと思いますがご教授お願いします。
前回
http://kazusa.mobi/maps/hatorino.html
のページの事質問させて頂いたのですが理解できずにまだ苦しんでいます。
>> かずさモバイル さん
オリジナルサイズのマーカーを使うときに「G_DEFAULT_ICON」記述を残していると、すべてが標準サイズ(幅20ピクセル、高さ34ピクセル)のままになってしまうのではないですか?
私は以下のような記述しか思い浮かびません
http://japonyol.net/editor/mlb-2.html