How do I display information for a particular location by viewing in responsive mode on my mobile?

Question

How do I display information for a particular location by viewing in responsive mode on my mobile?

Navigation

#1 by (0 votes)
#2 by (0 votes)

-1

I've added the iframe from a certain place on my site, but the location information and route suggestions do not appear when I view it in mobile mode,

Here is the way it appears on your phone:

Here'sthewayIwantittoappearwhenviewedonmyphone:

Thesettingsinthestyleofthemaparenotthose:

<style>.embed-container{position:relative;padding-bottom:56.25%;height:0;overflow:hidden;max-width:100%;}.embed-containeriframe,.embed-containerobject,.embed-containerembed{position:absolute;top:0;left:0;width:100%;height:500px;}</style>

iframe:

<iframesrc="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3714.5088877509456!2d-48.50192088548785!3d-21.40923378579348!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x94b93967f68b2d9f%3A0x4fd97015c3d8cff5!2sGrande+Hotel+de+Taquaritinga!5e0!3m2!1spt-BR!2sbr!4v1512313658033" 
    width="100%" 
    height="450" 
    frameborder="0" style="border:0" allowfullscreen>
</iframe>

html google-maps maps responsive

asked by anonymous 03.12.2017 / 17:14

2 answers

Get span text from a site and return it to the console Spring + JavaScript

score 0 · Answer 1

You can not change this, it's part of the responsiveness of iframe of Google Maps.

The map will only display the complete information if the width it occupies is equal to or greater than 400 pixels . Logo , this is not directly linked to the device being cellular or not.

Open an iPhone 4 in the landscape position () so the information will appear complete. Now , if you turn to the portrait position (320x480 pixels), only the location name will appear.

score 0 · Answer 2

Let's try the following:

no css

.container-map{
  position: relative;
  padding-bottom: 56.25%; 
  height: 0; 
  overflow: hidden; 
  max-width: 100%;
}

Now in html, place the iframe inside the div .container-map and change the width to auto instead of 100%, like this:

<iframe 
src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3714.5088877509456!2d-48.50192088548785!3d-21.40923378579348!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x94b93967f68b2d9f%3A0x4fd97015c3d8cff5!2sGrande+Hotel+de+Taquaritinga!5e0!3m2!1spt-BR!2sbr!4v1512313658033"width="auto" 
height="450" 
frameborder="0" style="border:0" allowfullscreen>

And see if it works! hug!!