Simple markers Google Map API with C# .Net
Simple markers Google Map API with C#
ปักหมุดลงใน Google Map โดยนำข้อมูลจาก C# สามารถเปลี่ยนหมุดได้ตามที่เรากำหนดเลย
C# CodeFile map.aspx.cs
string sql = "SELECT Latitude, Longitude,markericons FROM table";
SqlCommand cmd = new SqlCommand(sql, con);
SqlDataAdapter da = new SqlDataAdapter(cmd);
da.Fill(ds, "Result");
//ข้อมูลจาก Sql server
List<String> oGeocodeList= new List<String>();
List<String> MarkerIcon = new List<String>();
for (int i = 0; i < ds.Tables["Result"].Rows.Count; i++){
oGeocodeList.Add(" '" + ds.Tables["Result"].Rows[i]["Latitude"].ToString() + "," + ds.Tables["Result"].Rows[i]["Longitude"].ToString() + "' ");
MarkerIcon.Add(" '" + ds.Tables["Result"].Rows[i]["markericons"].ToString() + "' ");
}
String geocodevalues= String.Join(",", oGeocodeList.ToArray());
String markerList = String.Join(",", MarkerIcon.ToArray());
ClientScript.RegisterArrayDeclaration("locationList", geocodevalues);
ClientScript.RegisterArrayDeclaration("markerList", markerList);
C# Code map.aspx
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
//free limit 1000/24hr
<script type="text/javascript">
var map;
function initialize() {
if (locationList.length == 0) {
var Latlng = new google.maps.LatLng(15.870032, 100.992541); //location of Thailand in Latitude&Longtitude
}
else {
var initLatLng = locationList[0].split(",");
var Latlng = new google.maps.LatLng(initLatLng[0], initLatLng[1]);
}
var myOptions = {
zoom: 17,
center: Latlng,
mapTypeId: google.maps.MapTypeId.SATELLITE
}
map = new google.maps.Map(document.getElementById("gmap"), myOptions);
for (var i = 0; i < locationList.length; i++) {
var args = locationList[i].split(",");
var location = new google.maps.LatLng(args[0], args[1]);
//maker color
// var image = "images/" + markerList[i];
var image = {
url: "images/" + markerList[i],
// This marker is 20 pixels wide by 32 pixels high.
scaledSize: new google.maps.Size(22, 32)
};
var marker = new google.maps.Marker({
position: location,
map: map,
icon: image
});
marker.setTitle(message[i].replace(/(<([^>]+)>)/ig, ""));
attachSecretMessage(marker, i);
}
}
function getAreaInfo(polygon, index) {
google.maps.event.addListener(polygon, 'mouseover', function () {
tooltip.show(message[index]);
});
google.maps.event.addListener(polygon, 'mouseout', function () {
tooltip.hide();
});
}
function attachSecretMessage(marker, number) {
var infowindow = new google.maps.InfoWindow({
content: message[number],
size: new google.maps.Size(50, 50)
});
google.maps.event.addListener(marker, 'click', function () {
infowindow.open(map, marker);
});
}
window.onload = initialize;
</script>
<body>
div id="gmap" style="width: 800px; height: 500px;"></div>
</body>
จาก code เราจะสามารถกำหนดหมุดได้จากไฟล์ jpg หรือ png
ปักหมุดลงใน Google Map โดยนำข้อมูลจาก C# สามารถเปลี่ยนหมุดได้ตามที่เรากำหนดเลย
string sql = "SELECT Latitude, Longitude,markericons FROM table";
SqlCommand cmd = new SqlCommand(sql, con);
SqlDataAdapter da = new SqlDataAdapter(cmd);
da.Fill(ds, "Result");
//ข้อมูลจาก Sql server
List<String> oGeocodeList= new List<String>();
List<String> MarkerIcon = new List<String>();
for (int i = 0; i < ds.Tables["Result"].Rows.Count; i++){
oGeocodeList.Add(" '" + ds.Tables["Result"].Rows[i]["Latitude"].ToString() + "," + ds.Tables["Result"].Rows[i]["Longitude"].ToString() + "' ");
MarkerIcon.Add(" '" + ds.Tables["Result"].Rows[i]["markericons"].ToString() + "' ");
}
String geocodevalues= String.Join(",", oGeocodeList.ToArray());
String markerList = String.Join(",", MarkerIcon.ToArray());
ClientScript.RegisterArrayDeclaration("locationList", geocodevalues);
ClientScript.RegisterArrayDeclaration("markerList", markerList);
C# Code map.aspx
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
//free limit 1000/24hr
<script type="text/javascript">
var map;
function initialize() {
if (locationList.length == 0) {
var Latlng = new google.maps.LatLng(15.870032, 100.992541); //location of Thailand in Latitude&Longtitude
}
else {
var initLatLng = locationList[0].split(",");
var Latlng = new google.maps.LatLng(initLatLng[0], initLatLng[1]);
}
var myOptions = {
zoom: 17,
center: Latlng,
mapTypeId: google.maps.MapTypeId.SATELLITE
}
map = new google.maps.Map(document.getElementById("gmap"), myOptions);
for (var i = 0; i < locationList.length; i++) {
var args = locationList[i].split(",");
var location = new google.maps.LatLng(args[0], args[1]);
//maker color
// var image = "images/" + markerList[i];
var image = {
url: "images/" + markerList[i],
// This marker is 20 pixels wide by 32 pixels high.
scaledSize: new google.maps.Size(22, 32)
};
var marker = new google.maps.Marker({
position: location,
map: map,
icon: image
});
marker.setTitle(message[i].replace(/(<([^>]+)>)/ig, ""));
attachSecretMessage(marker, i);
}
}
function getAreaInfo(polygon, index) {
google.maps.event.addListener(polygon, 'mouseover', function () {
tooltip.show(message[index]);
});
google.maps.event.addListener(polygon, 'mouseout', function () {
tooltip.hide();
});
}
function attachSecretMessage(marker, number) {
var infowindow = new google.maps.InfoWindow({
content: message[number],
size: new google.maps.Size(50, 50)
});
google.maps.event.addListener(marker, 'click', function () {
infowindow.open(map, marker);
});
}
window.onload = initialize;
</script>
<body>
div id="gmap" style="width: 800px; height: 500px;"></div>
</body>
จาก code เราจะสามารถกำหนดหมุดได้จากไฟล์ jpg หรือ png
ความคิดเห็น
แสดงความคิดเห็น