Home/ Questions/Q 7088451
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-28T07:48:10+00:00

I have a problem loading google map. In my head section I have the

  • 0

I have a problem loading google map. In my head section I have the following code (I have a correct Google API Key)

<script src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript"></script>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=MYKEY&sensor=false"></script>
<style type="text/css">
  html { height: 100% }
  body { height: 100%; margin: 0; padding: 0 }
  #map_canvas { height: 100% }
</style>
<script type="text/javascript">
    function initialize() {
        var myOptions = {
            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"),
        myOptions);
    }
</script>

and my body section starts as follows: 

<div class="page">
    <div id="header">
        <div id="title">
            <h1>My MVC Application</h1>
            <div id="map_canvas" style="width: 100%; height: 100%"></div>

This doesn’t work. However when I move the “map_canvas” div just after the body:

<body onload="initialize()">
<div id="map_canvas" style="width: 100%; height: 100%"></div>
    <div class="page">
        <div id="header">

it all works fine. Can you help me please. Additionally, how can I use jQuery instead of calling initialize method?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    As Bassam mentioned, you need to set an explicit pixel width and height. Otherwise, take a look at the CSS for page, header, and title elements. The width and height for these elements needs to cascade to the map_canvas element.

    To use jQuery instead of initialize, remove onload="initialize()" from the body element and add the following code above initialize() function:

    $(document).ready(function() {
   initialize();
 });
    • 0