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
Daniel Mironis
14,023 PointsDynamic 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
Nick Stellato
Front End Web Development Techdegree Student 33,994 PointsCheck 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();
}
Daniel Mironis
14,023 PointsDaniel Mironis
14,023 PointsHi Nick, I think it is not the problem, because I have changed zooom to 4 and other numbers, but it was always the same