Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

HTML Build an Interactive Website Google Maps Integration Adding a Dynamic Map

Vittorio Somaschini
Vittorio Somaschini
33,371 Points
Posted by Vittorio Somaschini
Vittorio Somaschini
33,371 Points

Responsive google map

Hello. guys.

I am coding a page where I want to have a full width google map, on every device/browser I want it to have full width and full height.

Here is my html code:

<!DOCTYPE html>
<html>
<head>
    <title>TooManyPlaces</title>

<link rel="stylesheet" type="text/css" href="style/main.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

</head>

<body>
    <div id="map">
        <div id="staticMap" >
            <img class="map_image" src="https://maps.googleapis.com/maps/api/staticmap?center=0,0&zoom=1&size=500x360&scale=2">
        </div>
    </div>
</body>
<script type="text/javascript"
      src="https://maps.googleapis.com/maps/api/js?key=AIzaSyD9p_TkhTFq9iG2Me_YSN3k7dzDl8VTZas&sensor=false">
</script>

<script type="text/javascript">
    function initialize() {
        $('#map').prepend('<div id="jsMap"></div>');
        $('#staticMap').remove();
        var mapOptions = {
          center: { lat: 45.4667, lng: 9.1667},
          zoom: 2,
          scale: 2
        };
    var map = new google.maps.Map(document.getElementById('jsMap'),
        mapOptions);
    }
    google.maps.event.addDomListener(window, 'load', initialize);
</script>

</html>

and this is my css code:

#staticMap {
    width: 100%;
    height: 100%;
}

#map {
    width: 100%;
    height: 100%;
}

#jsMap {
    width: 100%;
    height: 100%;
    position: relative;
}

.map_image {
    position: relative;
    width:100%;
}

So I have a static map, which is responsive and I would say all ok with it. The dynamic map is killing me. I have set it but it is not responsive, I gotta admit than I am no css genius but I can't believe I can't figure this out.

Where am I going wrong here? With the code I have provided here I only get a blank screen and this is because I haven't set a css height (I have only put 100%).

I have also watched Andre's video again but I haven't managed to come up with a solution.

Any ideas?

Thanks

Vittorio

3 Answers

Wayne Priestley
Wayne Priestley
19,579 Points
Wayne Priestley
Wayne Priestley
19,579 Points

Hi Vittorio,

Have you tried using max-width: 100%;?

Vittorio Somaschini
Vittorio Somaschini
33,371 Points
Vittorio Somaschini
Vittorio Somaschini
33,371 Points

Yes. But it does not solve the problem.

To have a map displayed I need to fill in the size, but if I do it in pixel it is not going to be responsive.

It must be something in the css as andrew's code worked fine, I will download the project files and have a look here I think.

Vittorio Somaschini
Vittorio Somaschini
33,371 Points
Vittorio Somaschini
Vittorio Somaschini
33,371 Points

Ok.

This morning I found a way to sort things out, having a read here and there.

This is the code I have produced.

HTML:

<!DOCTYPE html>
<html>
<head>
    <title>TooManyPlaces</title>

<link rel="stylesheet" type="text/css" href="style/main.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

</head>

        <!-- JAVASCRIPT Responsive Google Map -->
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
    <script>
    var map; //<-- This is now available to both event listeners and the initialize() function
    function initialize() {
        var mapOptions = {
        center: new google.maps.LatLng(40.5472,12.282715),
        zoom: 2,
        mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        map = new google.maps.Map(document.getElementById("jsMap"),
                  mapOptions);
      }
      google.maps.event.addDomListener(window, 'load', initialize);
      google.maps.event.addDomListener(window, "resize", function() {
      var center = map.getCenter();
      google.maps.event.trigger(map, "resize");
      map.setCenter(center); 
      });
</script>

<body>
    <div id="map">
        <div id="staticMap" >
            <img class="map_image" src="https://maps.googleapis.com/maps/api/staticmap?center=0,0&zoom=1&size=500x360&scale=2">
        </div>
    </div>
</body>

        <!-- REMOVE static map  -->
<script type="text/javascript">
    function removeStaticMap() {
        $('#map').prepend('<div id="jsMap"></div>');
        $('#staticMap').remove();
    }
    removeStaticMap();


</script>

</html>

CSS

#staticMap {
    width: 100%;
    height: 100%;
}

#map {
    width: 100%;
    height: 100%;
}

#jsMap {
    width: 100%;
    height: 600px;
}

.map_image {
    position: relative;
    width:100%;
}

html, body, #map, #jsMap {
    margin: 0;
    padding: 0;
    height: 100%;
}

I am not still 100% convinced about the css, maybe I have put too much in it, but now I have a full height/width fully responsible map.

My last concern is about SEO, is this a good practice having a static image for users with no javascript that is then removed by javascript (also used to append the new div with the javascript map)?

Should I just set and alt attribute for the static map? Dan Gorgone Andrew Chalkley

Thanks in advance.

Vittorio

Andrew Chalkley
Andrew Chalkley
Treehouse Guest Teacher
Andrew Chalkley
Andrew Chalkley
Treehouse Guest Teacher

Every image should have an alt attribute.