CODEWITHSUNDEEP
javascriptjquerygoogle-maps
Achilles
Achilles

Reputation: 11299

Binding a google map instance to an html element nested within another element

I'm using JQuery to locate a DOM Element that I want to bind a google map instance to:

var GoogleMap;
var ListOfMarkers = new Array();

function DisplayMap(GoogleMapPlaceHolder) {

    var MapCenterPoint = new google.maps.LatLng(39.28629188966093, -76.60345947265624);

    var MapOptions = {
        zoom: 8,
        center: MapCenterPoint,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    }

    //Create a new GoogleMap instance
    var MapDiv = $('#' + GoogleMapPlaceHolder)[0];
    GoogleMap = new google.maps.Map(MapDiv, MapOptions);

}

HTML:

<body onload="DisplayMap('DivMap')">
    <form id="form1" runat="server">
    <div>
        <div id="DivMap"></div>
    </div>
    </form>
</body>

Edit: I am referencing the Google Maps Javascript(not displayed).

When the page renders, the map will not display. Why is the code failing to display the map?

Upvotes: 0

Views: 360

Answers (1)

lsuarez
lsuarez

Reputation: 4992

My first thought is that Google Maps fills the containing space without pushing its CSS height attribute. Do you have styles defining the height of #DivMap? If not, block level elements like divs will be generated by a browser with a 0px calculated height value.

Upvotes: 1

Related Questions