В веб-формах , чтобы получить видимую карту, мне всегда приходилось оба звонить initialize() и явно установите ширину и высоту элемента map_canvas div в количество пикселей. Вы можете проверить, что проценты приводят к тому, что высота div карты равна 0 px, изучая div с помощью инструментов разработчика F12 или Firebug.
Этот код показывает div карты, который изменяется по мере изменения размера браузера. Обратите внимание, что javascript помещается в файлы, на которые ссылается "~/bundles/gmaps".
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="testme.aspx.cs" Inherits="drawingTools.testme" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script type="text/javascript"
src="http://maps.google.com/maps/api/js?sensor=false&libraries=drawing"></script>
<asp:PlaceHolder ID="PlaceHolder1" runat="server">
<%: System.Web.Optimization.Scripts.Render("~/bundles/gmaps") %>
<script type="text/javascript">
google.maps.event.addDomListener(window, 'load', myPageLoad);
</script>
</asp:PlaceHolder>
</head>
<body>
<form runat="server">
<div id="map_canvas" class="map_canvas" >
</div>
</form>
</body>
</html>
В aspx код google.maps.event.addDomListener(window, 'load', pageLoad);
служит для вызова функции myPageLoad при загрузке окна. Или используйте функцию JQuery $(document).ready, чтобы дождаться готовности документа для инициализации карт Google.
function myPageLoad() {
resize();
initialize(); // your google.map initializer
}
Функция resize(), используемая для карт с изменяемым размером. Вы можете настроить это в соответствии с требованиями. Цель состоит в том, чтобы установить размеры map_canvas div на 100%.
function resize() {
var main = document.getElementById("map_canvas");
main.style.height = (getWindowHeight()) + "px";
main.style.width = (getWindowWidth()) + "px";
}
onresize = function () { resize(); };
Функции javascript getWindowHeight() и getWindowWidth() можно получить из многих источников, или вы можете написать свои собственные.
В качестве редакционной статьи использование карт Google на страницах aspx сопряжено с трудностями. Например. обратная передача из элемента управления кнопки будет вызывать функцию myPageLoad, когда нежелательно с плохими результатами, если только обратная передача не отключена.