Карта Google не хочет загружаться - PullRequest
0 голосов
/ 24 января 2012

У меня проблема с загрузкой карты Google.В моем разделе заголовка у меня есть следующий код (у меня есть правильный ключ API Google)

<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>

, и раздел моего тела начинается следующим образом:

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

Это не работает.Однако, когда я перемещаю div "map_canvas" сразу после тела:

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

, все работает нормально.Не могли бы вы мне помочь.Кроме того, как я могу использовать jQuery вместо вызова метода initialize?

1 Ответ

0 голосов
/ 24 января 2012

Как упоминал Бассам, вам нужно установить явную ширину и высоту пикселя. В противном случае взгляните на CSS для page, header, and title элементов. Ширина и высота этих элементов должны каскадироваться к элементу map_canvas.

Чтобы использовать jQuery вместо инициализации, удалите onload="initialize()" из элемента body и добавьте следующий код выше функции initialize():

$(document).ready(function() {
   initialize();
 });
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...