Poor mapping on Google Maps API

I've been trying to embed a Google Maps on my website, but for some reason, it keeps stretching and showing grey sections with rounded borders. Here's the code I'm using:

<div class="p-5 col-6 d-flex flex-column justify-content-between">
    <div class="d-flex justify-content-center map-container">
        <div id="map"></div>
    </div>
</div>
<script type="text/javascript">
        var map;
        function initMap() {
            // Create the map with no initial style specified.
            // It therefore has default styling.
            map = new google.maps.Map(document.getElementById('map'), {
                center: {
                    lat: 38.9340635, 
                    lng: 16.2328417
                },
                zoom: 10,
                scrollwheel: false,
                dropPins: true,
                panBy: [0,0],
                tilt: 0,
                heading: 0,
                mapType: 'roadmap',
                panControl: false,
                zoomControl: false,
                mapTypeControl: false,
                scaleControl: false,
                streetViewControl: false,
                overviewMapControl: false,
                plusMinusZoom: false
            });
        }
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCAeasy64XNqw6_DVPPmqX1cnqJNqSu7CU&callback=initMap" async defer></script>

Here is the CSS related to it:

.map-container {
    position: relative;
    display: block;
    height: 100%;
}
#map {
    position: relative;
    display: block;
    bottom: 0;
    height: 100%;
    width: 100%;
    border-radius: 15px;
}

This is how it appears on the website:

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

What could be causing this issue?

Answer №1

Within the map section, I applied a CSS rule to style images:


border-radius: 15px;
max-height: 40%;

To resolve this issue, I created a specific class for the image and allocated these styling rules to that class.

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

Create a hover effect on HTML map area using CSS

Is it possible to change the background color of an image map area on hover and click without using any third-party plugins? I attempted the following code: $(document).on('click', '.states', function(){ $(this).css("backgro ...

The close button is not functioning properly

I created a script to close my div element by clicking on the 'x' icon, but instead of deleting the div only, the whole page gets deleted. I'm not sure where I went wrong, can anyone help me? HTML <div class="note"> <span id ...

Breaking content into two sections using Javascript or jQuery

Uncertain if Javascript can handle this task, any assistance or advice is appreciated. Consider this scenario: Suppose I have a 6-paragraph long content (text only) being pulled dynamically from the database all at once. This means that all 6 paragraphs a ...

Positioning a material UI dialog in the middle of the screen, taking into account variations in its height

Dealing with an MUI Dialog that has a dynamic height can be frustrating, especially when it starts to "jump around" the screen as it adjusts to fit the content filtered by the user. Take a look at this issue: https://i.stack.imgur.com/IndlU.gif An easy f ...

Prevent the page from scrolling while the lightbox is open

I am struggling with a lightbox that contains a form. Everything is functioning properly, but I need to find a way to prevent the HTML page from scrolling when the lightbox is active. <a href = "javascript:void(0)" onclick=" document.getElementById(& ...

Autofocus Styling with CSS Bootstrap

Currently, I am working on creating a grid of large buttons using React and Bootstrap. I have implemented CSS for hover and focus effects on these buttons. My main issue arises when I try to load the screen with one button already focused. I attempted to ...

Styling elements using flexbox and various other divs

Looking to style a webpage with CSS to achieve this particular layout: https://i.sstatic.net/K3x0A.png The objective is to make the page responsive where the red and blue columns (left and right) have fixed widths. The center column should be collapsible ...

How to retrieve the current event handler's value with jQuery

To assign an onclick event handler using jQuery, I simply use the following code: $('#id').click(function(){ console.log('click!'); }); Now, my question is how can I retrieve a reference to the function that is currently handling th ...

The mdb navigation bar seems to constantly change its height

Having an issue with the height of my mdb navbar in my Angular app. It randomly flips to a larger size when reloading the page, but returns to normal when I open the developer console in Chrome. Two screenshots show the correct display and the incorrect i ...

Exploring options for accessing Google Maps API on iPhone without using UIWebView for processing JavaScript

I need to retrieve data from Google Maps using JavaScript, without using a webview. For example, I have two points (lat,lng) and I want to use the Google Maps API to calculate the driving distance between them. Essentially, I want to utilize the Google Ma ...

Concealing the URL Once Links are Accessed

I have a Movie / TV Shows Streaming website and recently I've noticed visitors from other similar sites are coming to my site and copying my links. Is there a way to hide the links in the address bar to make it more difficult for them to access my con ...

What is the process for connecting two scripts together?

Purpose : I am currently working on a Firefox add-on with the goal of tracking the online status of my team members in a game. Current Progress : I have developed an initial JavaScript script that runs upon opening the browser. This script creates and ...

What is the best way to align an image in the middle of an image slider within a Bootstrap

Struggling to align the image properly in a Bootstrap 5 image slider carousel: https://i.sstatic.net/upPza.png <div id="carouselExampleIndicators" class="carousel slide" data-bs-ride="carousel"> <div class=&qu ...

What is the best way to display table headers for each record on mobile devices? Is there a way to create a stacked view

I recently started working with bootstrap, specifically version 3. I am currently trying to find a way to create a layout that resembles a regular table when viewed on desktop but switches to a stacked format on mobile devices. This is the design I am aim ...

Animation in CSS3: Blinking overlay block

I am interested in creating an element that will overlay a section of a webpage using position: absolute. The element should be 50% opaque and blink between red and transparent, similar to the way OSX used to do with default dialog buttons. Is there a way ...

"Using jQuery to target elements in the HTML Document Object Model

Is there a way to retrieve the outer HTML of a selected object using jQuery? For instance, if I have: $("#test.test_class") how can I convert it into an HTML string like this: <div id="test" class="test_class"></div> If anyone knows how to ...

Conceal the div until the animation with a delay of `1s` has finished, then reveal it afterwards

I have incorporated a CSS file to introduce animations on the website I am currently developing. You can find it here: The premise of this CSS file is straightforward - by adding specific class names to div elements, you can animate them as you scroll up ...

To determine the class of an element and reveal its parent if the class is present

Typically, the parent element remains hidden by default. However, upon clicking a specific element, its child might gain a class called "selected". How can I check for this class and then display the entire list if it is present? <ul style="display: ...

What is the best way to resize SVG graphics effectively?

I am in need of creating a seating chart. I have generated an SVG with the seats. <div class="seats-map"> <svg xmlns="https://www.w3.org/2000/svg" id="seats-map-svg" viewBox="0 0 1000 300"> <g data-row ...

How to keep an image anchored at the bottom of the page without overlapping other content

I'm trying to have a logo image stay fixed at the bottom of a navigation drawer, but when I use absolute positioning and set it to the bottom, it overlaps with the list items on shorter devices. When the scroll bar appears due to shrinking the browser ...