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!
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
Gareth Redfern
36,217 PointsTask 4 Google Maps Integration
It may just be me but I am really struggling with this latest js class. I feel like we have gone from 10mph to 150mph. Although the class is definitely where I want to be heading in terms of knowledge I am doing a lot of copying what is in the video without fully understanding the reasons why I am doing what I am doing if that makes sense.
Anyway my problem is with task 4:
On the line after "geocoderOptions" on the "geocoder" object call the "geocode" method, pass in "geocoderOptions" as the first argument, an anonymous function as the second. The anonnymous function takes two parameters "results" and "status". If "google.maps.GeocoderStatus.OK" is the same as the statues create a "google.maps.Marker" in "theMap" and at the position of the first element in "results", like in the video and push it on to the "markers" array.
My Code Is:
var mapOptions = {
center: new google.maps.LatLng(28.42, -81.58),
zoom: 18,
mapTypeId: google.maps.MapTypeId.SATELLITE
};
var mapElement = document.getElementById("map");
var theMap = new google.maps.Map(mapElement, mapOptions);
var markers = new Array();
var geocoder;
var bounds;
var geocoderOptions = {
address: "Magic Kingdom, Disney World"
};
function addMarkerToMap(location) {
var marker = new google.maps.Marker({
map: theMap,
position: location
});
bounds.extend(location);
map.fitBounds(bounds);
}
geocoder = new google.maps.Geocoder();
bounds = new google.maps.LatLngBounds();
geocoder.geocode(geocoderOptions, function(results,status) {
if (google.maps.GeocoderStatus.OK == status) {
addMarkerToMap(results[0].geometry.location);
}
});
I can get the code marker to display on the map but I am not sure where to use the push method to populate the array.
Just for info I think that there is also a typo in the question "statues" should be status?
Any help would be appreciated.
Gareth
12 Answers
Andrew Chalkley
Treehouse Guest TeacherIt does show up but the Code Challenge asks you to push it on to an array.
There is a markers array defined like this:
var markers = new Array();
You need to push the marker on to the array.
markers.push(marker);
Where marker is the name of the marker you've done.
Working with APIs is tricky and you have to do a lot of copying and pasting and aren't always well documented. In the case of Google Maps documentation is pretty good if you ever need to do something new. I don't have this particular stuff memorized, I have to refer back to documentation as a refresher.
I encourage people to try things out on their local machine too. Tweak things and experiment, see what happens when you do this, or do that.
Christoph Rumpel
6,715 PointsHi,
do you mean you cannot see the marker? I have tried the code and i see the marker, little bit youth your view. Do you want to set the view to the marker or how can i help you? Cheers
Gareth Redfern
36,217 PointsHi Christoph, thank you for your help. Yes I can see the marker fine but I can not pass the task because I need to push to the markers array like the last part of the question says:
If "google.maps.GeocoderStatus.OK" is the same as the statues create a "google.maps.Marker" in "theMap" and at the position of the first element in "results", like in the video and push it on to the "markers" array.
Aimee Knight
9,701 PointsGareth Redfern, I agree with your pros and cons. The previous videos in this stage were fine, but this one doesn't give much explanation. I also feel like I copied and pasted without learning. I'm stuck too, so will be waiting on clarification. Will try reading some of the documentation till then.
Christoph Rumpel
6,715 PointsHey, sry i read your question wrong. I haven't been doing the tasks, but since no other answered i would try to help you if i can. Is your problem that you do not know how to push an element to a array? ( array.push(somethingyoulikeinthearray) )
Gareth Redfern
36,217 PointsThanks Andrew, I am sorry but I am still not following where/how to push onto the array I would guess its something like this:
geocoder.geocode(geocoderOptions, function(results,status) {
if (status == google.maps.GeocoderStatus.OK) {
addMarkerToMap(results[0].geometry.location);
markers.push(marker);
}
});
This doesn't validate though.
Christoph Rumpel
6,715 PointsAre you getting an error that "marker is not defines"? I would guess you should push the marker to the array in your addMarkerToMap function, since there you are creating the marker.
Andrew Chalkley
Treehouse Guest TeacherThe marker you're defining is inside the addMarkerToMap function so in the function above it can't see it.
This is a scoping issue, Jim talks about scope here.
You could push it in the addMarkerToMap function or try and do what the addMarkerToMap function does inside the anonymous function.
marieyvonnecombot
27,193 PointsOuf! c'est difficile, as my english is not so fluent. But I've got it with these help and listening almost10 times to your video. In fact everything is in. Thanks Andrew :))
Andrew Chalkley
Treehouse Guest TeacherGlad you got there!
James Bray
8,466 Pointsif you were doing this exercise with just one maker, how would you control the zoom level.
I figure zoom doesn’t work in this tutorial as we’re setting the zoom level by map bounds?
Andrew Chalkley
Treehouse Guest TeacherIn mapOptions set the zoom: 8, or to something more appropriate.
James Bray
8,466 PointsThanks for the reply andrew,
I have taken the working files from this project to reduce the chances of a mistake, and for some reason zoom level is not affecting the zoom level. I’m not really sure why this could be.
Andrew Chalkley
Treehouse Guest TeacherDo you apply bounds afterwards? If so try not doing that.
James Bray
8,466 PointsIf I place the bound before the marker before the map options the zoom is still ignored.
function addMarkerToMap(location){
var marker = new google.maps.Marker({map: map, position: location});
bounds.extend(location);
map.fitBounds(bounds);
}
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(-34.397, 150.644),
zoom: 18,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map"),
mapOptions);
geocoder = new google.maps.Geocoder();
bounds = new google.maps.LatLngBounds();
}
James Bray
8,466 Pointssorry, I hadn’t tried moving bounds = new google.maps.LatLngBounds(); before the mapOption, but even still it’s not working.
Andrew Chalkley
Treehouse Guest TeacherDon't fit to bounds if you don't want to. Change the zoom value manually.