[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。
Google MAP API
（社内イントラサイトやユーザーIDなどが必要なホームページなどは、無償で使用できない）
参考
まーかーを複数設置： http://gmap3.blog52.fc2.com/blog-entry-17.html
住所から座標を取得： http://www.ajaxtower.jp/googlemaps/geocoding/index1.html
噴出し：http://www.nanchatte.com/map/showDifferentInfoWindowOnEachMarker.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
</head>
<body>
<input type='button' value='検索' onclick="aaa()">
<div id="map" style="width:100%; height:90%;"><br>
<script type='text/javascript'>
var realAdr = [
["仕入れ先1","東京都大田区"],
["仕入れ先2","横浜市青葉区"],
["仕入れ先3","大阪市平野区"]
];
var map = new google.maps.Map(document.getElementById("map"), {
zoom: 5,
center: new google.maps.LatLng(36,138),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
function aaa(){
for (var i = 0; i < realAdr.length; i++) {
getLatLng(realAdr[i][1],realAdr[i][0]);
}
}
function getLatLng(place,placeName) {
var geocoder = new google.maps.Geocoder();
geocoder.geocode({
address: place,
region: 'jp'
},function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
//var bounds = new google.maps.LatLngBounds();
for (var r in results) {
if (results[r].geometry) {
//座標取得
var latlng = results[r].geometry.location;
//bounds.extend(latlng);
var address = results[0].formatted_address.replace(/^日本, /, '');
//初期値は吹き出しなしの場合
var myMarker = new google.maps.Marker({
position: latlng,
map: map,
title: placeName
});
//クリックして吹き出し
attachMessage(myMarker, placeName);
/*
//吹き出しを付ける場合
new google.maps.InfoWindow({
content: placeName
}).open(map, new google.maps.Marker({
position: latlng,
map: map,
title: "aaa"
}));
*/
}
}
//map.fitBounds(bounds);
} else if (status == google.maps.GeocoderStatus.ERROR) {
alert("通信エラー");
} else if (status == google.maps.GeocoderStatus.INVALID_REQUEST) {
alert("リクエストエラー");
} else if (status == google.maps.GeocoderStatus.OVER_QUERY_LIMIT) {
alert("送信多数エラー");
} else if (status == google.maps.GeocoderStatus.REQUEST_DENIED) {
alert("ジオコーダの利用不可エラー");
} else if (status == google.maps.GeocoderStatus.UNKNOWN_ERROR) {
alert("サーバ側エラー");
} else if (status == google.maps.GeocoderStatus.ZERO_RESULTS) {
alert("見つかりません");
} else {
alert("エラー");
}
});
}
//クリックしたら吹き出し表示
function attachMessage(marker, msg) {
google.maps.event.addListener(marker, 'click', function(event) {
new google.maps.InfoWindow({
content: msg
}).open(marker.getMap(), marker);
});
}
</script>
</div>
</body>
</html>