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

JavaScript

Dynamic google map zoom too close to the location

So I went trough google map integration course and everytime when my page loads, the dynamic map show the location with marker but the zoom is too high. How to change zooming like in the course, that shows all the continent?

My code:

<div id="content">
      <div id="contacts">
        <h2>ContactI</h2>
        <h4>
            <b>Vilnius, Lithuania</b><br>
        </h4>
        Adresas: <address><b>konstitucijos g.</b></address>
        <p>Mob. nr.: <b>+370 609 82 645</b></p>
        <p>El. pastas: <b>info@somesite.lt</b></p>
        <div id="map">
        </div>
        <p class="static_map">
        <img src="http://maps.googleapis.com/maps/api/staticmap?size=400x300&sensor=false&markers=Vilnius,+konstitucijos+g.">
        </p>
    </div>
</div>  

<script type="text/javascript"
   src="https://maps.googleapis.com/maps/api/js?sensor=false">
</script>

<script type="text/javascript">
    $('#contacts').append('<div id="map"></div>');
    $('.static_map').remove();
    var map;
    var bounds;
    var geocoder;
    var center;
    function initialize() {
        var mapOptions = {
          center: new google.maps.LatLng(-34.397, 150.644),
          zoom: 8,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        map = new google.maps.Map(document.getElementById("map"),
            mapOptions);
        geocoder = new google.maps.Geocoder();
        bounds = new google.maps.LatLngBounds();
    }

    function addMarkerToMap(location){
        var marker = new google.maps.Marker({map: map, position: location});
        bounds.extend(location);
        map.fitBounds(bounds);
    }
    initialize();

    $("address").each(function(){
        var $address = $(this);
        geocoder.geocode({address: $address.text()}, function(results, status){
            if(status == google.maps.GeocoderStatus.OK) addMarkerToMap(results[0].geometry.location);
        });
    });

    google.maps.event.addDomListener(map, "idle", function(){
        center = map.getCenter();
    });
</script>

1 Answer

Check out the zoom setting on your initialize function.

  function initialize() {
        var mapOptions = {
          center: new google.maps.LatLng(-34.397, 150.644),
          zoom: 8,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        map = new google.maps.Map(document.getElementById("map"),
            mapOptions);
        geocoder = new google.maps.Geocoder();
        bounds = new google.maps.LatLngBounds();
    }

Hi Nick, I think it is not the problem, because I have changed zooom to 4 and other numbers, but it was always the same