A problem when using Google Maps JavaScript API v3 in a Orchard module by following the Google's "Getting Started" example

Topics: Troubleshooting, Writing modules
Sep 16, 2012 at 4:57 PM
Edited Sep 16, 2012 at 5:05 PM

The map area doesn't appear if use the "div" element in the same way as the "Getting Started":

<div id="map_canvas" style="width:100%; height:100%"></div>

It is like that if set the value of width and height to the percentage value, the map can't appear in the "div" element.

If change the value of width and height to the px value such as: 

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

then the map appears.

Coordinator
Sep 16, 2012 at 9:22 PM

Are you referring to a doc topic that needs to be fixed? If so, which one?

Sep 17, 2012 at 3:50 PM
Edited Sep 17, 2012 at 3:52 PM
bertrandleroy wrote:

Are you referring to a doc topic that needs to be fixed? If so, which one?

I referred to this https://developers.google.com/maps/documentation/javascript/tutorial and this is my correct code

 

<!DOCTYPE html>
<html>
    <head>
        <script type="text/javascript"
            src="http://maps.googleapis.com/maps/api/js?sensor=false">
        </script>        
        <title>�</title>
    </head>
    <body>
        <form action="" method="post">
            <input name="Latitude" type="text" />
            <input name="Longitude" type="text" />
            <input id="Submit1" type="submit" value="��ѯ" />
            @Html.AntiForgeryTokenOrchard()
        </form>
        @*����ָ��width��height*@
        <div id="map_canvas" style="position:relative;width:1000px;height:400px"></div>
    </body>
</html>
@{
    if(!IsPost)
    {
        <script type="text/javascript">
            var mapOptions = {
                center: new google.maps.LatLng(-34.397, 150.644),
                zoom: 8,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            }
            var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
        </script>
    }
    else
    {
        var lat = Request["Latitude"].AsFloat();
        var lng = Request["Longitude"].AsFloat();
        <script type='text/javascript'>
            var mapOptions = {
                center: new google.maps.LatLng(@(lat), @(lng)),
                zoom: 8,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };
            var map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
        </script>
        <p>@("�: " + lat + " " + "����: " + lng)</p>
    }
}

Coordinator
Sep 17, 2012 at 5:19 PM

I'm confused. Is there anything we can do to help you on the Orchard side?