mehdilahori Ответов: 1

Google maps не показывается ASP.NET

я пытаюсь использовать очень просто карту Google в asp.net но по некоторым причинам, и я уверен, что там будут какие-то, карта не показывает в странице aspx.я не мастер, используя теги и Java-скрипт. вслед за очень известным asp.net/google учебник по карте в coderproject. перепробовал много комбо относительно загрузки src и типа скрипта.
в настоящее время JS-код находится вне тега формы, но он также не работает внутри тега формы.
вот код

Что я уже пробовал:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key= xxxxXfuVqTQRTy5AmZx9D3pHjkfHW4&sensor=false">
</script>
    <title></title>
</head>
<body>
<div id="map">
<script type="text/javascript">
    function InitializeMap() {
        var latlng = new google.maps.LatLng(-34.397, 150.644);
        var myOptions = {
            zoom: 8,
            center: latlng,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        var map = new google.maps.Map(document.getElementById("map"), myOptions);
    }

    window.onload = InitializeMap;
</script>
<form id="form1" runat="server">    
    
    </form>
    </div>
    
</body>
</html>

ZurdoDev

Ваш html-код испорчен. Двигаться внутри формы, который также означает, чтобы переместить закрывающий тег div внутри тега form, а также. затем переместите сценарий в свою голову.

1 Ответов

Рейтинг:
12

Richard Deeming

Вполне возможно, что onload событие будет срабатывать до скрипт maps закончил загрузку.

Вам также необходимо установить явную высоту для элемента контейнера.

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html>
<html>
<head runat="server">
    <title>Simple Map</title>
    <meta name="viewport" content="initial-scale=1.0">
    <meta charset="utf-8">
    <style>
    /* Always set the map height explicitly to define the size of the div element that contains the map. */
    #map {
        height: 400px;
    }
    </style>
</head>
<body>
    <div id="map"></div>
    
    <script>
    function InitializeMap() {
        var latlng = new google.maps.LatLng(-34.397, 150.644);
        
        var myOptions = {
            zoom: 8,
            center: latlng,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        
        var map = new google.maps.Map(document.getElementById("map"), myOptions);
    }
    </script>
    
    <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=InitializeMap" async defer></script>
</body>
</html>

приступая к работе  |  Google Maps JavaScript API  |  Разработчики Google[^]

mehdilahori

да...и чтобы сделать его более простым для любого новичка, просто поместите style= "height: 400px" в тег div