Display the Google V3 Map APIs in an ASP.net Web Form

Question

I am trying to display a Google map on an ASP.net web form page.

Javascript is as follows:

<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 does not work if I put the div tag in the form tag.

 <form id="form1" runat="server"> <div id="map-canvas" ></div> </form> 

But if I move the div tag outside 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 help me, how can I do this? Thanks.

Answer 1

Just set the width and height of the div to see this! Your map is there, but not visible :)

 <div id="map_canvas" style="width:600px;height:400px"></div> 

You can 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 be no problem if it is inside the form tag. I gave an example here. Can you take a look at http://deepumi.wordpress.com/2010/03/28/google-map-3-with-multiple-locations-in-asp-net-c/