Google Maps API V3について教えてください。

閲覧: 423 回
最初の未読メッセージにスキップ

かつかつ

未読、
2011/05/25 9:29:432011/05/25
To: Google-Maps-API-Japan
こんにちわ。
Version3を利用して地域のエリアマップを作成しています。
htmlを少しかじった程度でJava　ScriptもAPIもほぼ初心者なのですが、勝又さん著の書籍や、ネットを調べつつ進めているところです。
今回やりたいことは
　1.複数のカスタムマーカーを使用（マーカーは40箇所、マーカー種類は10種類程度）
　2.マーカークリックで情報ウィンドウを表示させる
　3.マップ外のリンクから情報ウィンドウを表示させる
で、2の項目までは何とか進みましたが、3がどうにも上手くできません。
マーカーリストの付け方に問題があるのかとは思うのですが、他に適した方法が分かりませんでした。

経験者の皆様にご教示頂いて、どうにか完成させたいと思います。
下記に現況を記します。
見づらい部分もあるかと思いますが、よろしくお願い申し上げします。


<script type="text/javascript" src="https://maps-api-ssl.google.com/
maps/api/js?sensor=false"></script>
<script type="text/javascript">
var marker;
var defmarker;
var markers = [];
var infoWindow = new google.maps.InfoWindow();

function initialize()
{

var myLatlng = new google.maps.LatLng(35.615331,139.579309);
var myOptions = {
zoom: 16,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControl : false,
navigationControl : true,
scaleControl : true
}
var map = new
google.maps.Map(document.getElementById("map_canvas"), myOptions);

var markers = [
[[0],'西山歯科クリニック', 35.61585,139.5769,'isha','address','http://
www.nishiyama-dc.jp/'],
[[1],'岡野産婦人科', 35.616702,139.576916,'isha','address',' '],
[[2],'野村外科医院', 35.613789,139.571962,'isha','address',' '],
[[3],'小島米店', 35.617077,139.577879,'shokuryo','address',' '],
[[4],'ライフ宿河原店',35.617474,139.576208,'shokuryo','address',' '],
[[5],'オリジン弁当宿河原店', 35.614609,139.578863,'shokuryo','address',' '],
[[6],'川崎信用金庫宿河原支店',35.615331,139.579309,'kinyu','address',' '],
[[7],'セレサ川崎宿河原支店', 35.61424,139.578633,'kinyu','address',' '],
[[8],'川崎宿河原郵便局', 35.615043,139.578979,'kinyu','address',' '],
[[9],'宿河原浴場', 35.614742,139.580164,'kinyu','address',' ']
];

for (var i = 0; i < markers.length; i++)
{
var marker = markers[i];

var marker_list = marker[0];
var name = marker[1];
var latlng = new google.maps.LatLng(marker[2], marker[3]);
var category = marker[4];
var text = marker[5];
var link = marker[6];
var html = '<div style="height: 80px; width: 200px"><b>'+name+'</
b></br>'+text+'</br><a href="'+link+'" target="_blank">'+link+'</
a>' ;

createMarker(latlng,html,map,category,name,text,link)
}

}

function createMarker(latlng,html,map,category,name,text,link)
{
var iconOffset = new google.maps.Point(10, 0);
var iconPosition = new google.maps.Point(0, 0);
var iconSize = new google.maps.Size(34, 34);
var iconShadowSize = new google.maps.Size(37, 34);

var ishaUrl = "http://maps.google.co.jp/mapfiles/ms/icons/green-
dot.png";
var ishaShadowUrl = "http://maps.google.co.jp/mapfiles/ms/icons/
msmarker.shadow.png";
var ishaIcon = new google.maps.MarkerImage(ishaUrl, iconSize,
iconPosition, iconOffset);
var ishaShadow = new google.maps.MarkerImage(ishaShadowUrl,
iconShadowSize, iconPosition, iconOffset);

var shokuryoUrl = "http://maps.google.co.jp/mapfiles/ms/icons/
ltblue-dot.png";
var shokuryoShadowUrl = "http://maps.google.co.jp/mapfiles/ms/
icons/msmarker.shadow.png";
var shokuryoIcon = new google.maps.MarkerImage(shokuryoUrl,
iconSize, iconPosition, iconOffset);
var shokuryoShadow = new
google.maps.MarkerImage(shokuryoShadowUrl, iconShadowSize,
iconPosition, iconOffset);

var kinyuUrl = "http://maps.google.co.jp/mapfiles/ms/icons/purple-
dot.png";
var kinyuShadowUrl = "http://maps.google.co.jp/mapfiles/ms/icons/
msmarker.shadow.png";
var kinyuIcon = new google.maps.MarkerImage(kinyuUrl, iconSize,
iconPosition, iconOffset);
var kinyuShadow = new google.maps.MarkerImage(kinyuShadowUrl,
iconShadowSize, iconPosition, iconOffset);

var customIcons =
{
isha: {icon:ishaIcon,shadow:ishaShadow},
shokuryo: {icon:shokuryoIcon,shadow:shokuryoShadow},
kinyu: {icon:kinyuIcon,shadow:kinyuShadow}
};

var icon = customIcons[category] || {};

var marker = new google.maps.Marker(
{
map: map,
position: latlng,
icon: icon.icon,
shadow: icon.shadow,
title: name
});

google.maps.event.addListener(marker, 'click', function()
{
infoWindow.setContent(html);
infoWindow.open(map,marker);
});
}

function clickMarker(index)
{
google.maps.event.trigger(marker_list[index], "click");
}

window.onload = initialize;
</script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="width:60%; height:80%; border:1px solid
Gray;"></div>
<p><a href="#map_canvas" onclick=":clickMarker[0];">西山歯科クリニック</a></
p>
　<p><a href="javascript:clickMarker[1];">岡野産婦人科</a></p>
</body>
</html>

KF

未読、
2011/05/26 7:11:402011/05/26
To: Google-Maps-API-Japan
以下のように変更すれば動きます。追加、修正した行については★★★をつけてあります。



<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=shift_jis">
<title>エリアマップ</title>
<script type="text/javascript" src="https://maps-api-ssl.google.com/
maps/api/js?sensor=false"></script>
<script type="text/javascript">
var marker;
var defmarker;
var allMarkers = []; // ★★★
var infoWindow = new google.maps.InfoWindow();
function initialize()
{
var myLatlng = new google.maps.LatLng(35.615331,139.579309);
var myOptions = {
zoom: 16,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControl : false,
navigationControl : true,
scaleControl : true
}

var map = new
google.maps.Map(document.getElementById("map_canvas"), myOptions);
var markers = [
[[0],'西山歯科クリニック',
35.61585,139.5769,'isha','address','http://www.nishiyama-dc.jp/'],
iconSize,iconPosition, iconOffset);
var ishaShadow = new
google.maps.MarkerImage(ishaShadowUrl,iconShadowSize, iconPosition,
iconOffset);
var shokuryoUrl = "http://maps.google.co.jp/mapfiles/ms/icons/
ltblue-dot.png";
var shokuryoShadowUrl = "http://maps.google.co.jp/mapfiles/ms/
icons/msmarker.shadow.png";
var shokuryoIcon = new
google.maps.MarkerImage(shokuryoUrl,iconSize, iconPosition,
iconOffset);
var shokuryoShadow = new
google.maps.MarkerImage(shokuryoShadowUrl, iconShadowSize,
iconPosition, iconOffset);
var kinyuUrl = "http://maps.google.co.jp/mapfiles/ms/icons/purple-
dot.png";
var kinyuShadowUrl = "http://maps.google.co.jp/mapfiles/ms/icons/
msmarker.shadow.png";
var kinyuIcon = new google.maps.MarkerImage(kinyuUrl,
iconSize,iconPosition, iconOffset);
var kinyuShadow = new
google.maps.MarkerImage(kinyuShadowUrl,iconShadowSize, iconPosition,
iconOffset);
var customIcons =
{
isha: {icon:ishaIcon,shadow:ishaShadow},
shokuryo: {icon:shokuryoIcon,shadow:shokuryoShadow},
kinyu: {icon:kinyuIcon,shadow:kinyuShadow}
};
var icon = customIcons[category] || {};
var marker = new google.maps.Marker(
{
map: map,
position: latlng,
icon: icon.icon,
shadow: icon.shadow,
title: name
});
google.maps.event.addListener(marker, 'click', function()
{
infoWindow.setContent(html);
infoWindow.open(map,marker);
});
allMarkers.push(marker); // ★★★
}
function clickMarker(index)
{
console.log(allMarkers[index]);
google.maps.event.trigger(allMarkers[index], "click");
}
window.onload = initialize;
</script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="width:60%; height:80%; border:1px solid
Gray;"></div>
<p><a href="#map_canvas" onclick="clickMarker(0);">西山歯科クリニック</a></p>
<!-- ★★★ -->
　<p><a href="javascript:clickMarker(1);">岡野産婦人科</a></p> <!-- ★★★ -->
</body>
</html>

かつかつ

未読、
2011/05/26 7:48:122011/05/26
To: Google-Maps-API-Japan
KFさん、早速の返信ありがとうございました。
丁寧に見ていただいて、感謝しています。

さっそく修正してみたところ、無事に作動しました。
なかなか上手くできなかったので感動しております。
これからも勉強していこうと思っていますので、また何かありました時にはご指導よろしくお願いいたします。

全員に返信
投稿者に返信
転送
新着メール 0 件