There is an issue with loading Google Maps on ASP.NET

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:

https://i.sstatic.net/JfMeH.png

Answer №1

When you have a button within a form that is behaving like a submit button and triggering a page refresh, it is likely because the type of the button has not been specified. By default, if no type is specified, the button will act as a submit button, causing the form to be submitted and the page to reload.

To resolve this issue, update your button code to:

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

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Dropdown element vanishes upon selecting in HTML

Utilizing Angular's ng-init to populate a rest call function and populate $scope.races before filling up the dropdown. Initially, everything appears to be working correctly. However, upon selecting an option from the dropdown menu, it immediately cle ...

Exploring Entity Framework: The Difference Between SaveChanges and Transactions

Here's a question that may seem a bit silly, but I haven't been able to find an answer for it yet. Is there any distinction between making a single call to SaveChanges() versus making a single call to SaveChanges() within a transaction? (I' ...

Error: The system is unable to destructure the 'username' property from 'req.body' since it is not defined

Encountering a persistent issue with an error that I've been trying to resolve for days without success. The problem arises when attempting to register a user in the project, resulting in error messages being displayed. Here's a snippet of the co ...

How can I adjust the font size in a TextField when it is in focus?

As a novice in ReactJS, I am currently utilizing materia-ui to design a page. I am looking to make a custom change on a TextField where the font size adjusts when text is entered. However, adjusting the font size creates too much space between the label a ...

Vue: Clear the current form selection with a button click

<b-row class="mb-3"> <b-col> <div class="float-right"> <b-form-select v-model="selected" :options="options" ></b-form-select> ...

Retrieving a specific document from an array that meets a specific query using MongoDB in JavaScript

I have a collection of data stored in MongoDB structured like this: users: { { user_id: 1000, activities: [ {id: 1, activity: 'swimming'}, {id: 2, activity: 'running'}, {id: 3, activi ...

Making changes to a JSON file's data

I have been working on updating the quantity and price in cart.json through the following code snippet: addProduct(id) { // Retrieve the previous cart data fs.readFile(p, (err, fileContent) => { let cart = []; if (!err) { car ...

Increase the day count by 1 on every third cycle

I've been working on a code to increment the days in a date variable every third iteration using modulus. While I have managed to get the logic for every third iteration right, the day doesn't seem to increase by 1. I searched online and found s ...

Utilize client-side script in nodejs to share module functionalities

I created a function within the user controller module to verify if a user is logged in on the site: exports.isLoggedIn = function(req, res, next) { if (req.user) { return true; } else { return false; } }; I'm unsure of h ...

Can you tell me the distinction between using RemoteWebDriver's executeScript() and Selenium's getEval() for executing

Can you explain the distinction between these two pieces of code: RemoteWebDriver driver = new FirefoxDriver(); Object result = driver.executeScript("somefunction();"); and this: RemoteWebDriver driver = new FirefoxDriver(); Selenium seleniumDriver = ne ...

Customize your Google Translate experience by choosing your own option values

Is there a way to trigger the same JavaScript calls by clicking on an option value in an HTML select element as with text-based links in the Google Translate widget? Check out this jsfiddle for more information <html> <body> <select i ...

Identifying a specific item within an array

Can someone guide me on how to manipulate a specific object within an array of objects? For example: var myArray = [ {id: 1}, {id: 2}, {id: 3}, {id: 4} ] // Initial state with the 'number' set as an array state = { number: [] } // A functio ...

Fullcalendar Bootstrap popover mysteriously disappears

I'm having issues with my Bootstrap popovers being hidden under the rows in FullCalendar. I've tried using container: 'body' and trigger: 'focus', but they don't seem to work. The function that's causing this proble ...

An error in syntax is being triggered by the Php file being accessed through the <script src="list.php"></script>

We're facing an unusual problem with our online ordering platform script that we purchased a few months ago. It had been functioning perfectly for several months, but now we're encountering an issue! The website page is not loading, and when we c ...

The functionality of Angular 2 md-radio buttons in reactive forms seems to be hindering the display of md-inputs

Currently, I am following the instructions for implementing reactive form radio buttons on a project using Angular 2.1.2 and Google's MD-alpha.10 Atom-typescript shows no errors in my code. However, when testing the application, I encountered the foll ...

`The header navigation is not responding to window resizing functionality`

I am currently developing a header navigation that consists of a logo on the left side, a profile icon on the right side, and some navigation links in the middle. A left slide menu has been implemented to trigger when the window width is less than 700px. ...

Can you utilize npm to print a byte array on a printer similar to how it's done in Java using DocFlavor.BYTE_ARRAY.AUTOSENSE?

We are transitioning from an outdated Java application to a new Electron app. Previously, we triggered the cash drawer of a register by printing a byte array using DocFlavor.BYTE_ARRAY.AUTOSENSE. Can this same functionality be achieved with an npm package ...

Accessing Firebase with .NET C# for data retrieval

I am encountering issues when trying to retrieve data to my .net application from a Firebase-hosted database. During the debugging process, I observed that the response contains [{"Description":"desccc","Id":2},{"Description":"asdfasdf","Id":1}], which is ...

Utilizing Javascript to export modules and call multiple functions simultaneously

Is there a way to automate the calling of all functions within a module instead of individually selecting each one? For instance: bettermovies.js module.exports={ printAvatar: function(){ console.log("Avatar"); }, printLord: funct ...

Google is currently unable to provide the accurate latitude and longitude of the current position

I'm looking to incorporate geolocation functionality into my Laravel project. I've implemented this code, but it seems to be giving me slightly different latitude and longitude values. function getLocation() { var x = document.getElementById( ...