Displaying Google Map API V3 in ASP.net Web Form - google-maps-api-3

Question

I am trying to display Google Map in my ASP.net web form page.
The javascript is as below:
<script type="text/javascript"
src="https://maps.googleapis.com/maps/api/js?key=xxxxx&sensor=false">
</script>
<script type="text/javascript">
var map;
function initialize() {
var mapOptions = {
zoom: 8,
center: new google.maps.LatLng(-34.397, 150.644),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var mapcv = document.getElementById('map-canvas');
map = new google.maps.Map(mapcv,
mapOptions);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
I used the following HTML and it doesn't work if I put the Div Tag within the form tag.
<form id="form1" runat="server">
<div id="map-canvas" ></div>
</form>
But if I move Div tag outside of the form tag as below, it works
<div id="map-canvas" ></div>
<form id="form1" runat="server">
</form>
I want to put the Div tag inside the form. Could you please help me how I could do that? Thanks.

Answer 1

Simply set the div width and height to see it! Your map is there but not visible :)
<div id="map_canvas" style="width:600px;height:400px"></div>
You could also set them in css in the header:
<style>
html, body, #form1, #map_canvas
{
margin: 0;
padding: 0;
height: 100%;
}
</style>

Answer 2

There should not be any problem if it is inside form tag. I have posted a example here.. Can you take a look http://deepumi.wordpress.com/2010/03/28/google-map-3-with-multiple-locations-in-asp-net-c/