using div tag inside asp.net form not working

mtcoder

unread,

Sep 1, 2011, 11:11:04 AM9/1/11

to google-map...@googlegroups.com

I have a pretty simple setup. with an asp.net page that has a form tag with a few fields. when I do this my scripts work.

 function loadpolygon() {
        var doc = document.forms['form1'];
        var ticketPoly = [
        new google.maps.LatLng(Coordinates[0],Coordinates[1]),
        new google.maps.LatLng(Coordinates[2], Coordinates[3]),
        new google.maps.LatLng(Coordinates[4], Coordinates[5]),
        new google.maps.LatLng(Coordinates[6], Coordinates[7]),
        new google.maps.LatLng(Coordinates[8], Coordinates[9]),
        new google.maps.LatLng(Coordinates[10], Coordinates[11])];
 
        var ticketPolyPath = new google.maps.Polygon({
            paths: ticketPoly,
            strokeColor: "#FF0000",
            strokeOpacity: 1.0,
            strokeWeight: 2,
            fillColor: "#FF0000",
            fillOpacity: 0.35
        });
        
        
        var centerMap = new google.maps.LatLng(Centroid[0], Centroid[1]);
 
        var polygonOptions = {
            zoom: 17,
            mapTypeId: google.maps.MapTypeId.HYBRID
        };
        mapPoly = new google.maps.Map(document.getElementById("map_poly"), polygonOptions);
        mapPoly.setCenter(centerMap);
        ticketPolyPath.setMap(mapPoly);
 
        google.maps.event.addListener(ticketPolyPath, 'click', showTicketInfo);
        infowindow = new google.maps.InfoWindow();
    }

with my html as.
<body>
<form id="form1" runat ="server">
fields etc
</form>

<div id="map_poly">
</div>
</body>

However if I try doing
<body>
<form id="form1" runat ="server">
fields etc

<div id="map_poly">
</div>
</form>
</body>
The map doesn't show.

Looks like it can't find the map_poly id.
Any thoughts?
Thank you

Rossko

unread,

Sep 1, 2011, 2:46:17 PM9/1/11

to Google Maps JavaScript API v3

> Any thoughts?

See 'READ THIS FIRST', it would help a lot if we could see what is
actually delivered to the browser
http://groups.google.com/group/google-maps-js-api-v3/t/2b3f101fd509919e
or of course you could look yourself. The Maps API javascript doesn't
care what you do at the server, its the browser end that counts.

mtcoder

unread,

Sep 1, 2011, 2:51:08 PM9/1/11

to google-map...@googlegroups.com

So the real problem is the form tag doesn't carry any height value by default. So when google api goes to set the map height it fails as the form container doesn't have a height. adding height to the form via style or CSS resolves the problem

Esa

unread,

Sep 2, 2011, 7:20:27 AM9/2/11

to Google Maps JavaScript API v3

I don't think it is a good idea to place map container inside a form
element.

Andrew Leach

unread,

Sep 2, 2011, 7:56:32 AM9/2/11

to google-map...@googlegroups.com

On 2 September 2011 12:20, Esa <esa.i...@gmail.com> wrote:
> I don't think it is a good idea to place map container inside a form
> element.

It isn't. But that's ASP (and ASP.NET) for you.

Reply all

Reply to author

Forward