Creating a responsive Google map within a div element: A step-by-step guide

Question

Creating a responsive Google map within a div element: A step-by-step guide

I am experiencing difficulties with implementing a responsive Google map on my webpage. To achieve a mobile-first and responsive design, I am utilizing Google Map API v3 along with Bootstrap 3 CSS. My objective is to obtain user addresses either through the automatic filling of the address form using Google Places API or by extracting coordinates from the map and GPS. I have set up radio buttons to allow users to choose between these two options. The default selection is the address form. However, when the 'Use Map' option is selected, the form should be hidden, and the Google map should appear in its place. Unfortunately, this functionality isn't working as expected. Upon inspection using Mozilla's Inspect Element, I confirmed that the map is loaded in the background.

The issue: The map refuses to display within the specified div, identified as div id="map-canvas." Everything else seems to be functioning correctly. I did manage to display a static Google map image in the same div by appending the image file using the .innerHTML() function.

The solution I seek is to successfully showcase the map inside the map-canvas div while ensuring it remains responsive.

Below is the code snippet (consisting of HTML, JS, and CSS):

javascript html css google-maps

Answer 1

Answer №1

Perhaps this is what you were searching for, as I gathered from your query. Explain width:100%

#map-canvas {
  margin: 20px 0;
  padding: 0;
  height: 300px;
  float: left;
  width: 100%;
}

HTML CODE

<div class="col-md-12">
<div id="map-canvas" style="position: relative; overflow: hidden; transform: translateZ(0px); background-color: rgb(229, 227, 223);"></div>
</div>

Answer 2

Perhaps this is what you were searching for, as I gathered from your query. Explain width:100%

#map-canvas {
  margin: 20px 0;
  padding: 0;
  height: 300px;
  float: left;
  width: 100%;
}

HTML CODE

<div class="col-md-12">
<div id="map-canvas" style="position: relative; overflow: hidden; transform: translateZ(0px); background-color: rgb(229, 227, 223);"></div>
</div>

Answer 3

Answer №2

To make your map responsive, add the class col-xs-12 to the div.

You can resize the window and the map will automatically adjust its size within the div.

.yourdiv {
  border: solid;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" />

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>

<!DOCTYPE html>
<html>

<head>
  <title>Simple Map</title>
  <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
  <meta charset="utf-8">
  <style>
    html,
    body,
    #map-canvas {
      height: 100%;
      margin: 0px;
      padding: 0px
    }
  </style>
  <script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
  <script>
    var map;

    function initialize() {
      var mapOptions = {
        zoom: 8,
        center: new google.maps.LatLng(-34.397, 150.644)
      };
      map = new google.maps.Map(document.getElementById('map-canvas'),
        mapOptions);
    }

    google.maps.event.addDomListener(window, 'load', initialize);
  </script>
</head>

<body>
  <div class="yourdiv col-xs-12" id="map-canvas"></div>
</body>

</html>

Answer 4

To make your map responsive, add the class col-xs-12 to the div.

You can resize the window and the map will automatically adjust its size within the div.

.yourdiv {
  border: solid;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" />

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>

<!DOCTYPE html>
<html>

<head>
  <title>Simple Map</title>
  <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
  <meta charset="utf-8">
  <style>
    html,
    body,
    #map-canvas {
      height: 100%;
      margin: 0px;
      padding: 0px
    }
  </style>
  <script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
  <script>
    var map;

    function initialize() {
      var mapOptions = {
        zoom: 8,
        center: new google.maps.LatLng(-34.397, 150.644)
      };
      map = new google.maps.Map(document.getElementById('map-canvas'),
        mapOptions);
    }

    google.maps.event.addDomListener(window, 'load', initialize);
  </script>
</head>

<body>
  <div class="yourdiv col-xs-12" id="map-canvas"></div>
</body>

</html>

Creating a responsive Google map within a div element: A step-by-step guide

Answer №1

Answer №2

Similar questions

Guide to importing a Kotlin/JS generated module into a separate npm-dependent project

Building a single page web application using TypeScript and webpack - a step-by-step guide

What is the process of permanently modifying an HTML document using JavaScript?

What is the best way to position an image alongside text using Vue and Buefy?

Having trouble making z-index work on a child div with absolute positioning

Meteor is failing to update the data in MongoDB

When using v-select to search for items, the selected items mysteriously vanish from

When using $http in AngularJS, an error may occur when it

Can we incorporate the radix-ui/colors variables into a CSS module file?

Alternative method to jQuery's "find" selector

Ways to call a DIV element in a PHP file from a different PHP file

Cycle through items and switch states using classList in JavaScript

Information about Doughnut chart in React using the react-chartjs-2 package

What's the reason this picture isn't displaying in its full size?

Using Django variable in li a:nth-child selector produces unexpected results

Having trouble accessing Kotlin JS from JavaScript

I am struggling to make my table adapt to different screen sizes and become

Font size for the PayPal login button

Is there a way to modify CSS styles for a child tag element after hovering over its parent?

What is the best way to create a menu in JavaScript that includes a variable declaration?