Create a dynamic and adaptable Google Maps experience without the need for an iframe

Question

Create a dynamic and adaptable Google Maps experience without the need for an iframe

For instance, if you are using an embedded Google Map.

You can ensure that your Google Map is responsive with the following code:

Using iframe (simple iframe)

<div class="ggmap">
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d212270.5451230493!2d-84.42060395!3d33.7677129!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x88f5045d6993098d%3A0x66fede2f990b630b!2sAtlanta%2C+GA!5e0!3m2!1sen!2sus!4v1396981185525" width="600" height="450" frameborder="0" style="border:0"></iframe>
</div>

.ggmap {
  position: relative;
  padding-bottom: 56.25%;
  padding-top: 30px;
  height: 0;
  overflow: hidden;
}

.ggmap iframe,
.ggmapr object,
.ggmap embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

However, I prefer to use Google Maps via JavaScript like the example below.

No iframe (simple no-iframe)

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

function writeMap(latitude, longitude) {
  var latlng = new google.maps.LatLng(latitude, longitude);
  var opts = {
    zoom: 15,
    center: latlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };
  var map = new google.maps.Map(document.getElementById("map_canvas"), opts);
}

$(document).ready( function(){
        writeMap(latitude, longitude);       
});

In this scenario, how can I make the Google Map responsive?

css html google-maps iframe

Answer 1

Answer №1

Ensure that the container has defined height and width percentages to properly display content.

var latitude = 42.0;
var longitude = -72.0;
function createMap(latitude,longitude) {
  var latlng = new google.maps.LatLng(latitude,longitude);
  var options = {
    zoom: 15,
    center: latlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };
  var map = new google.maps.Map(document.getElementById("map_canvas"), options);
}

$(document).ready( function(){
        createMap(latitude,longitude);       
});

body, html, #map_canvas {
  height: 100%;
  width: 100%;
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map_canvas" ></div>

Answer 2

Ensure that the container has defined height and width percentages to properly display content.

var latitude = 42.0;
var longitude = -72.0;
function createMap(latitude,longitude) {
  var latlng = new google.maps.LatLng(latitude,longitude);
  var options = {
    zoom: 15,
    center: latlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };
  var map = new google.maps.Map(document.getElementById("map_canvas"), options);
}

$(document).ready( function(){
        createMap(latitude,longitude);       
});

body, html, #map_canvas {
  height: 100%;
  width: 100%;
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map_canvas" ></div>

Create a dynamic and adaptable Google Maps experience without the need for an iframe

Answer №1

Similar questions

Navigating through nested <ul> elements using Selenium and C#

Is there a way to shift this div to the bottom and incorporate some quirky pop-up squares?

The Javascript document refuses to load

Guide on displaying a stationary image using flask and JavaScript

Exploring the possibilities of extracting HTML content from custom tags in Angular JS

What is the best way to eliminate the dotted border from clickable images?

Using PHP to redirect upon clicking a link

Is it possible to detect inline elements that have been wrapped?

"Implementing a Callback Function when Jquery Countdown Reaches

If the width is below 767, the previous code will not be effective in jQuery

Upload file to database and move to new location

Is there a way to capture and print an entire DOM element with the help of angular-screenshot?

How can I prevent the same JavaScript from loading twice in PHP, JavaScript, and HTML when using `<script>'?

When utilizing CKEDITOR, the default TEXTAREA is obscured, and CKEDITOR does not appear

"Optimizing websites for Retina displays through pixel ratios and media queries

Is there a way to modify the automatic zoom feature in Bootstrap 4 Carousel that adjusts the image to fit a certain section?

PHP Form Functions Properly on Firefox, but Encounters Issues on IE and Chrome

Right-align SELECT-OPTIONS text

Using HTML5 canvas to draw circles with additional metadata stored in variables

Utilizing CSS :hover and :active states for internal elements