You first need to occur the API key of google map from google web site it is the unique key which google will provide based on your WEB site. That you need to place on top of the page like below.
Than you need to place the below code in the javasacript on the page;
Call the javascript in one of the body method to show the google map.
Now it will show the google map on the browser as like below;
<script src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAAtqTpCKL5xdhdKTH0qbCk1BTj3qButw15PEHf-_ZX8kb2LHkw7RScNMygEDMTuGQnVB2s8cVqDSdQ4g"
type="text/javascript"></script>
<script type="text/javascript">
var map = null;
var geocoder = null;
function load() {
if (GBrowserIsCompatible()) {
var point;
// this variable will collect the html which will eventually be placed
// in the side_bar
var side_bar_html = "";
// arrays to hold copies of the markers and html used by the side_bar
// because the function closure trick doesnt work there
var gmarkers = [];
var i = 0;
var lastlinkid;
function createMarker(point, name, html, name1, name2, name3, name4) {
var marker = new GMarker(point);
// var linkid = "link"+i;
GEvent.addListener(marker, "click", function () {
// Show the Chhattisgarh TouristPlace description
marker.openInfoWindowHtml('<div style="text-align:left ;" class="sectionBg1" ><font size="2" face="Arial"><b><u>' + name1 + '</u></b><br/>' + name2 + '<br/>' + name3 + '<br/>' + name4 + '<br/></font></div>');
// document.getElementById(linkid).style.background="#ffff00";
// lastlinkid=linkid;
});
// save the info we need to use later for the side_bar
gmarkers[i] = marker;
// add a line to the side_bar html
/* side_bar_html += '<div id="'+linkid+'"><a href="javascript:Linkclicked(' + i + ')">'+ name + '</a><br></div>';*/
i++;
return marker;
}
// This function picks up the click and opens the corresponding info window
function Linkclicked(i) {
GEvent.trigger(gmarkers[i], "click");
}
var CGGoodAll = '<%= Details %>';
var CgIndividual = new Array();
CgIndividual = CGGoodAll.split('|');
var map = new GMap2(document.getElementById("map"));
map.addControl(new GLargeMapControl());
map.addControl(new GMapTypeControl());
map.setCenter(new GLatLng(CgIndividual[4], CgIndividual[5]), 13);
var mm = new GMarkerManager(map);
// var CGGoodAll = new Array();
// add the points
// map.setCenter(new GLatLng(CgIndividual[4].CgIndividual[5]), 8);
var point = new GLatLng(CgIndividual[4], CgIndividual[5]);
var marker = createMarker(point, "This place", "This is", CgIndividual[0], CgIndividual[1], CgIndividual[2], CgIndividual[3]);
// GEvent.addListener(map,"infowindowclose", function() {
// document.getElementById(lastlinkid).style.background="#ffffff";
// });
mm.addMarkers(gmarkers, 0, 17);
mm.refresh();
}
}
</script>
<body onunload="GUnload()" onload="load()">
There it will show the Google map on the DIV section;
<asp:Panel ID="mapV" runat="server" Width="400px" CssClass="thickBorder">
<div id="main_map_container" runat="server">
<div id="map" style="width: 400px; height: 470px">
</div>
</div>
</asp:Panel>
No comments:
Post a Comment