My C# Web Application (asp.net web-forms) has a peculiar issue within the Default.aspx page that is part of a Master Page. The google map embedded within the content flickers once but never fully loads. Surprisingly, when I transfer the exact code from Content2 to an .HTML file, the map displays without any problem.
Checking through the console using F12, there are no errors detected. Why could this be occurring?
Default.aspx:
<%@ Page Title="" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="WebApplication1.Default" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3&libraries=geometry"></script>
<button onclick="initMap()">Load map</button><br/>
<br /><div id="map" style="width:500px; height: 500px;"></div>
<script type="text/javascript">
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 12,
center: new google.maps.LatLng(25.764116354703514, -80.19015369262695)
});
//Draggable Marker
var marker0 = new google.maps.Marker({
map: map,
position: new google.maps.LatLng(25.764116354703514, -80.19015369262695),
draggable: true
});
}
</script>
</asp:Content>
Screenshot after clicking "Load map" button: