Google Maps fails to display

I am having an issue with displaying a simple map from the Google Maps API in my HTML code. For some reason, the "map_canvas" div is initially set to be hidden when the page is loaded. Here is the code snippet:

<html>
<head>
<style type="text/css">
</style>
<script type="text/javascript" src="jquery-2.1.0.js"></script>
<script src="http://maps.googleapis.com/maps/api/js?" type="text/javascript"></script>
<script type="text/javascript">
        var mapOptions = {
          center: new google.maps.LatLng(-33.45, -70.66667),
          zoom: 11,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        jQuery(document).ready(function(){
            map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
        });
</script> 
</head>
<body>
body test
<div id="map_canvas">map test</div>
</body>
</html>

I added the text "map test" inside the div to check visibility. Any thoughts on why this might be happening?

Thank you.

jqueryhtmlcssgoogle-mapsgoogle-maps-api-3

Answer №1

Consider enhancing the map container by specifying a specific width and height

<div id="map_canvas" style="width: 400px; height: 400px;"></div>

Answer №2

Ensure that the script is placed before the closing </body> tag, and after the div#map_canvas.

If you encounter issues with your code, it might be because the id "map_canvas" doesn't exist at the time the script is executed.

<html>
<head>
<style type="text/css">
</style>
<script type="text/javascript" src="jquery-2.1.0.js"></script>
<script src="http://maps.googleapis.com/maps/api/js?" type="text/javascript"></script>
</head>
<body>
body test
<div id="map_canvas">map test</div>
<script type="text/javascript">
        var mapOptions = {
          center: new google.maps.LatLng(-33.45, -70.66667),
          zoom: 11,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        jQuery(document).ready(function(){
            map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
        });

</script> 
</body>
</html>

Additionally, don't forget to use your API key ("YOUR_KEY") and invoke a function with a callback. Here's an example from my site:

<!-- ... -->
<script async defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_KEY&callback=initMap"></script>

<script type="text/javascript">
function initMap() {
    var styleArray = [
        {
            featureType: "all",
            stylers: [
                { hue: "#3e4950" },
                { saturation: -80 }
            ]
        }
    ];
    var map = new google.maps.Map(document.getElementById('mymaps'), {
        center: {lat: 48.6949454, lng: 2.1856039},
        scrollwheel: false,
        draggable: false,
        zoomControl: false,
        disableDoubleClickZoom: true,
        disableDefaultUI: true,
        // Apply the map style array to the map.
        styles: styleArray,
        zoom: 9
    });
}
</script>
<!-- ... -->

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

designing a presentation with customizable durations for each slide

I am trying to implement a slideshow using the slides.js jquery plugin and I have a specific requirement for the duration of each slide. My goal is to have the first slide, which contains an embedded video, display for 7 seconds, while the subsequent slid ...

javascriptjqueryjquery-plugins

Google Book API is a tool provided by Google that

I am trying to loop through the items array provided by the Google Books API and display the result within a div, but I'm having trouble doing so. Here is my current code: <body> <div class="main-body"> <form id="form"> ...

javascripthtmlapigoogle-api

Creating a dynamic height footer in CSS that remains pinned to the bottom of the webpage

When the content on a page is limited, around 300 pixels or so, the footer tends to appear in the center of the page when viewed at a resolution of 1024. Is there a way to ensure that my footer always stays at the bottom of the page without having to know ...

htmlcssfootersticky-footer

Prevent the layout from shifting with CSS

I am faced with a challenge regarding a grid of images that are dynamically generated on the screen. The number of images in each row of the grid is dependent on the size of the page. While everything functions properly when the page is at a certain size, ...

htmlcss

Unexpected behavior with HTML Bootstrap's dl-horizontal layout

Despite having the div class "dl-horizontal" within the table, the dl-horizontal fields are displaying outside the table. Here is the code I used: <!DOCTYPE html> <html lang="en> <head> <title>Bootstrap Example</title> ...

htmlcssbootstrap-4

Pulling information from a database query to store it within a JavaScript variable

Using Ajax/JQuery, I successfully send the variable ($name) from page1.php to page2.php without refreshing the page. When the submit button is clicked, it sends me the var $name effectively. Additionally, in my JavaScript library for charts (AmCharts), the ...

javascriptjqueryajaxfunctionvar

Attempting to categorize TR rows based on a shared attribute

I am working with "domains" and their corresponding "phone numbers". My goal is to group all the numbers by their associated domain. I'm facing challenges in determining when one domain ends and another begins, so I can separate them into different b ...

phphtmlmysqlhtml-table

Navigating Your Way Through the Center (ASP.NET MVC)

My navbar has elements that I want to center within it, but using margin hasn't been successful. Do you have any suggestions on how I can achieve this alignment using CSS? This is the code snippet: <div class="navbar "> <div class="cont ...

htmlcssasp.netasp.net-mvctwitter-bootstrap

Tips for adding images using v-for in Vue 3

Having some trouble creating a set of images using a v-for loop, as it seems to be not recognizing the variables inside the tag. The picture is broken and the alt attribute just shows me {{ item.alt }}. Here is my HTML: <section class="our-technolo ...

htmlvue.jsfrontendvuejs3v-for

Why is it that the vertical square bar is not appearing on my website?

I've been attempting to add a vertical bar that stays fixed to the top right corner of my screen, but for some reason, it's not showing up no matter what I try. Here is the CSS code I'm using for my site, everything seems normal except that ...

htmlcss

Display a scrollbar for the offspring of an element with a flex-grow value of 1

I'm seeking to create a straightforward design consisting of a layered header, main section, footer. My framework of choice is bootstrap 5. The complete layout should occupy all available width and height, with overflow (x and y) set to hidden. Hea ...

cssbootstrap-5

Submitting POST data from a form to the current page

I am facing a rather complex issue. Currently, on a page, I have a form that collects information from my visitors. With the help of a script, I can grab this information and add it to a specific link. Initially, I used redirect.php to attach the data to ...

phphtmlformspost

Enable only the link-text to be clicked when hovering

I'm currently experimenting with creating a link for an h1 title that transforms when hovered over. It's working perfectly fine, but I'm facing an issue - if I place the /a tag outside of the h1 element, the entire element becomes clickable ...

htmlcss

When using Math.floor(Math.random() * val.length), the result will be a letter rather than a number

Looking to implement a feature where a different background image is displayed randomly upon page visit or refresh. Currently, specifying the images in an array like the example below works well, but I want to be able to pull from a folder. $(document).r ...

javascriptjqueryajaxmath

Parsing HTML with AngleSharp - Extracting Text from IElement

I am currently developing an HTML parser using AngleSharp that takes input in the following format: <p> Paragraph Text <a href="https://www.example com" class="external text" target="_new" rel="nofollow">Link Text</a> Paragraph Text 2 &l ...

c#htmlparsinganglesharp

Transform in-line elements using specific HTML attributes using CSS styling

Can you achieve this with links (a[href="/"]{_/*CSS declarations.*/_})? For instance: #example > .meow span[style="color:red;"] { text-transform: lowercase; } #example > .woof span[title="I'm a dog."] { color: blue; text-decorat ...

htmlcssattributes

Issues with Cross-origin resource sharing (CORS) arise when attempting to delete data using Angular

I am facing an issue with my Angular app (v1.13.15) and Express.js(v4.12.4) backend. Specifically, I have set up a DELETE method in my backend and enabled CORS support for it. However, every time I attempt to use the Angular $http.delete function, I enco ...

jqueryangularjsnode.jsexpresscors

Challenges encountered while attempting to animate the CSS clip feature in WebKit

I've been searching everywhere for a solution to my issue, but none of them seem to work. As someone new to CSS3 Animations, I appreciate your patience. I created a simple animation using CSS3 that functions perfectly in IE and Firefox, however, it ...

cssgoogle-chromeanimationwebkit

Removing the animation from a Material-UI Select component in React

Currently, I am utilizing the React Material UI's Select Component and I am looking to either remove or quicken the animation that occurs when opening the menu. I attempted the following approach: <Select ... TransitionComponent={({child ...

javascripthtmlcssreactjsmaterial-ui

How can I apply a CSS class to a group of radio buttons within a radio button list?

I'm attempting to validate a radio button group and apply a specific CSS class to it. Since this is a server control, I can only apply the class one way. However, upon checking with jQuery, I discovered that the class is actually being attached to the ...

javascriptjqueryhtmlasp.netcss