how to integrate google map in my asp.net web page?

Posted by Shameer.Ali87 under ASP.NET AJAX on 11/2/2012 | Points: 10 | Views : 6420 | Status : [Member] | Replies : 3
In my application I have to integrate google map in one of my web pages,

here's my code for integrating the google map..

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="http://maps.google.com/maps?file=api&v=1" type="text/javascript">
</script>
</head>
<body>
<div id="map" style="width: 700px; height: 500px"></div>
<script type="text/javascript">
//<![CDATA[

var map = new GMap(document.getElementById("map"));
map.centerAndZoom(new GPoint(-83.022206, 39.998264), 7);
map.setCenter(point, 15);
map.setUIToDefault();
map.setMapType(G_NORMAL_MAP);

// Create the marker and corresponding information window

function createInfoMarker(point, address)
{
var marker = new GMarker(point);
GEvent.addListener(marker, "click",
function()
{
marker.openInfoWindowHtml(address);
}
);
return marker;
}

// University Hall
var point = new GPoint(-83.013307, 40.000610);
address = "University Hall<br />230 North Oval Mall <br />Columbus, Ohio 43210";
var marker = createInfoMarker(point, address);
map.addOverlay(marker);

//]]>
</script>
</body>
</html>


its working fine but, here now i want to put my user defined markers...

can any one help me in doing this...

thanks
shameer ali shaik

shameer ali shaik


Responses

Posted by: Naraayanan on: 11/2/2012 [Member] Starter | Points: 25

Up
0
Down
Hi,
Check this link
http://forums.asp.net/t/1698605.aspx/1

Regards,
Lakshmi Naraayanan.S
http://dotnettechrocks.blogspot.in/
http://abaprocker.blogspot.com/

Shameer.Ali87, if this helps please login to Mark As Answer. | Alert Moderator

Posted by: Shameer.Ali87 on: 11/3/2012 [Member] Starter | Points: 25

Up
0
Down
thanks for the reply,

those links are fine..
but i got my code for getting user defined markers..
here's the code for it..

<html>

<head>
<title>Google Maps Example</title>
</head>
<body onload="initialize()">
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
var infowindow = null;

function initialize()
{
var centerMap = new google.maps.LatLng(39.828175, -98.5795);
var myOptions = {
zoom: 4,
center: centerMap,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("map"), myOptions);
setMarkers(map, sites);
infowindow = new google.maps.InfoWindow({
});
}

var sites =
[
['Mount Evans', 39.58108, -105.63535, 4, 'This is Mount Evans.</br>This is Mount Evans'],
['Badlands National Park', 43.785890, -101.90175, 1, 'This is Badlands National Park'],
];

function setMarkers(map, markers)
{
for (var i = 0; i < markers.length; i++)
{
var sites = markers[i];
var siteLatLng = new google.maps.LatLng(sites[1], sites[2]);
var marker = new google.maps.Marker({
position: siteLatLng,
map: map,
title: sites[0],
zIndex: sites[3],
html: sites[4]
});

iconFile = 'Images/A.png ';
marker.setIcon(iconFile)


google.maps.event.addListener(marker, "click", function ()
{
infowindow.setContent(this.html);
infowindow.open(map, this);
});
}
}
</script>
<div id="map" style="width: 600px; height: 500px;"></div>
</body>
</html>


the respective screen shot can be observed in the file uploaded...

but i now i got one more problem, here what if i have multiple markers, and that multiple markers will be different for each different location...

any help towards that will be appreciated

shameer ali shaik

Shameer.Ali87, if this helps please login to Mark As Answer. | Alert Moderator

Posted by: Kumaran1987 on: 4/4/2013 [Member] Starter | Points: 25

Up
0
Down
http://www.kumaran198726.com/2013/04/show-your-current-location-in-google.html

see here

Happy Coding,

Your Regards,
Kumaran K

Kumaran K

Shameer.Ali87, if this helps please login to Mark As Answer. | Alert Moderator

Login to post response