Google Maps in ASP.NET does not load

Question

I have a C# Web Application (asp.net web-forms) with the following inside of the Default.aspx page that is part of a Master Page. However, the google map never loads, actually it flickers once. But if I place the exact code that is currently inside of Content2 but place it in a .HTML file the map loads just fine.

I pressed F12 and there are no errors on the console. Why is this happening?

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)
            });

        //Dragable Marker
        var marker0 = new google.maps.Marker({
            map: map,
            position: new google.maps.LatLng(25.764116354703514, -80.19015369262695),
            draggable: true
            });

        }       
    </script>
</asp:Content>

Screenshot of output AFTER clicking "Load map" button:

Answer 1

You have a button in a form that's acting like a submit button, that's causing the page to refresh. If you don't specify a type for the button, it defaults to a submit button which causes the form to submit and the page to reload.

Change your button markup to:

<button type="button" onclick="initMap()">Load map</button>