データベースから取得した関連情報 (住所、緯度、経度、説明など) を使用して、Google マップに複数のマーカーを動的に表示するコードを作成しました。
Google マップとマーカーを表示するコードは次のとおりです。
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#dvMap { height: 100%; }
</style>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=myApiKey&sensor=false" >
</script>
<script type="text/javascript">
window.onload=function(){
var mapOptions={
center:new google.maps.LatLng(markers[0].lat,markers[0].lng),
zoom:8,
mapTypeId:google.maps.MapTypeId.ROADMAP
};
var infoWindow=new google.maps.InfoWindow();
var map=new google.maps.Map(document.getElementById("dvMap"),mapOptions);
for(i=0;i<markers.length;i++){
var data=markers[i];
var latlng=new google.maps.LatLng(data.lat,data.lng);
var marker=new google.maps.Marker({
position:latlng,
map:map,
title:data.title
});
(function(marker,data){
google.maps.event.addListener(marker,"click",function(e){
infoWindow.setContent(data.description);
infoWindow.open(map,marker);
});
})(marker,data);
}
}
</script>
ここに私のaspxページがあります
<form id="form1" runat="server">
<div id="dvMap" style="width:50%; height:50%;"></div>
<asp:Button ID="Button1" runat="server" Text="Button" onclick="Button1_Click" />
</form>