Build and interactive website > Code challenge: Adding point markers to a map - step 4/6

The anonnymous function takes two parameters "results" and "status": DONE (P.S. Anonymous only has 2 "n"s)

(P.S. Status is mis-spelt here)

Thanks - I'll update those!

This is probably the toughest bit of this and the following stage.

The results in the geocode method is a set of GeocoderResult objects (see Geocoder docs to see the geocode() method returns).

So you need to select the first entry results[0] the get the geometry property, which is a GeocoderGeometry object and then that has the location property.

Create a new marker with theMap and location remember a MarkerOptions object with key-value pairs and push it on to the array.

Hope that helps!

Hi Christina, I have been stuck on exactly the same part

http://teamtreehouse.com/forum/task-4-google-maps-integration

I agree it seems we have taken a massive jump in the level of knowledge you need to complete this task. I could really do with more lessons on what the code is actually doing before I can fully get my head round it.

Andrew could you give a different explanation I am still struggling to understand what to do after reading your explanation and at the moment the Google docs don't help much as I don't understand a lot of what is in them!

Hi! i have the same situation. Have no clue how to fix the array 'markers'

Hi Gareth (and Rodrigo and Christina if you're still struggling),

This is what the code does or should do in this step.

1 Use Google's Geocoder to reverse geocode the address

The geocode() is a method on an object of type google.maps.Geocoder.

The geocode() method takes two arguments, the first is a set of options. The options are stored in an object with keys and values. We're only concerned with reverse geocoding the value of the address key. The second is a callback function that Google uses to probably call() or apply() passing in the results which is an array and status.

geocoder.geocode(geocoderOptions, function(results, status){})

2 Check the status and get the first element from the results array.

We need to check if the status is OK because if it isn't we won't get any results back. If it's OK we want to process the first result. There may be more than one result in the array. This is if what we sent is 'fuzzy' like part of a street address and google may return several results. Since we're only looking for the Magic Kingdom in Disney World we can be confident that the first result is fine.

 geocoder.geocode(geocoderOptions, function(results, status){
    if(status == google.maps.GeocoderStatus.OK) {
    }
 );

3 Extract the location from the first result

The results sent to the function

 geocoder.geocode(geocoderOptions, function(results, status){
    if(status == google.maps.GeocoderStatus.OK) {
      var location = results[0].geometry.location;
    }
 );

4 Create a new google.maps.Marker

Remember a Marker takes an object with keys of map and position in the code challenge that was theMap and in this particular instance location.

geocoder.geocode(geocoderOptions, function(results, status){
    if(status == google.maps.GeocoderStatus.OK) {
      var location = results[0].geometry.location;
      var marker = new google.maps.Marker( {map: theMap, position:location});
    }
 );

5 Then push the marker onto markers array

On markers.push(nameOfMarkerHere).

geocoder.geocode(geocoderOptions, function(results, status){
    if(status == google.maps.GeocoderStatus.OK) {
      var location = results[0].geometry.location;
      var marker = new google.maps.Marker( {map: theMap, position:location});
      markers.push(marker);
    }
 );

Does that make it any clearer? If not I'd probably review some of the material in JavaScript Foundations like variables which covers things about scope, functions which covers more in detail about anonymous functions, and objects which goes over some things like keys, methods and the call() and apply() things that I spoke about earlier on in the post. I think once reviewing these again as a referesher, hopefully it will be clearer what's going on and imagining how Google have implemented some of it's API.

Also playing around on your local box putting in addresses you know and console.log-ing the results and mapping them on a map, commenting out lines and such may make things click more.

Regards, Andrew

Andrew thank you for spending the time putting this step by step post together it makes much more sense to me now.

I love learning through the videos and for me that is far and away the best way to learn but sometimes having a complicated concept written out and explained to you in this way really helps. Maybe in some cases it might be worth having written material to support the videos?

I have the other Javascript videos stored in my itunes and review them quite regularly maybe as an idea you could create some more side videos which go into more depth about specific Javascript topics and then reference them in the main projects as helper videos?

Thank you again for all your help though.

Thank you Andrew for going through this. From your initial response I was trying the following:

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

geocoder.geocode (geocoderOptions, function(results, status){
    if(status == google.maps.GeocoderStatus.OK) addMarkerToMap(results[0].geometry.location)
});

I guess that would have worked if I had defined the location.

I didn't realise you could open more curly brackets after the "if" to put your variables in there. I was just following the grammatical patterns shown in the video.

Thanks again for going so indepth with this stage. Now to tackle the next step!

Good idea Gareth.

Christina, as you go forward you'll find if statements in most languages have a single line and an multi-line forms. Some companies have policies on code styling and may enforce an always multi-line syntax or not. Something to keep an eye out for.

Man, that was confusing. I was about to make a thread of my own. Thanks for the clarification.

Thanks Andrew it helped a lot. By the way, you missed one curly bracket at the last line, but it worked very well.

I was able to get a better grasp of this question through this post, thanks for the help. I'm still confused about the syntax of the question though:

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.

The way I understand it is like this:

1. Create a new "google.maps.Marker", it will exist inside the variable "theMap."
2. Create another new "google.maps.Marker", this will exist in the array "results".
3. Push the marker inside the "results" array onto the "markers" array.

What does it mean to create a marker in the variable "theMap"? I know what the code is now, but I still need help associating the Challenge wording with the final result.

Thanks for your efforts.

Hi Devon,

To create a Marker within a map you need to pass in the map in to the Marker's constructor, the same goes for the position...

{map: theMapVariable, position: theLocationVariable}

By passing in the variable to the marker it puts it "in" to the map. This marker needs pushing on to the markers array.

Does that make it clearer?

Regards

Andrew

Got it, that helps. "theMap" isn't referring to the variable as if it were an array, but to the actual map itself. "in" is referring to the process we use to get a visual marker onto it:

We create a marker, but it just floats in code-space until we tell it where to go. There may be multiple maps on a page, so we tell it which map to jump into. Then we tell it where to go in that map.

If there are multiple markers, putting them into an array helps call them all more efficiently.

I know you guys are always working hard, but if you came out with a Deep Dive to help explain this stuff in more detail, I would jump for joy.

Thanks Andrew!

Spot on Devon :)

I am stucked even after reading this thread few times

http://codepen.io/Gbenatov/pen/cAosh

The error is: "It looks like Task 1 is no longer passing."

cant get it right...

I assume the geocoder var is changing after it been called at 4/6 task

Hi Gabriel,

The code pen is linking to a different code pen.

Can you show us your code for this challenge?

Regards

Andrew

I think you're missing an extra } just before the closing );. I think the syntax error isn't allowing the first task to pass.

Edit: Fixed, made a typo in 'geocoder' and forgot a "{" for my function.

This lesson is beyond Beginner level. Don't you think it would be wise to review this lesson and maybe explain this a bit more clearer rather than just ask to do random stuff that most of us do not understand? It is very confusing and very frustrating after doing this lesson I feel like i know nothing!

I felt overwhelmed as well, but it's important to realize that we're building functionality upon an existing project, and not specifically focusing on the Google Map APIs. It's meant to give you a broad overview of how things mesh together. If you were implementing this on your own in a real project, you'd be digging into the documentation yourself and experimenting with lots of cursing I'm sure

Hi Damien,

Thanks for your feedback.

Being a developer is challenging. Documentation for APIs can be sparse, and often you've got to reverse engineer example code and "hack" things together. Often you don't understand what's going on, even after years of experience, and that's fine.

As a developer it's not so much about the memorization of things but it's more about the abstract, i.e. the tools you have to solve a given problem.

I'm going to take another look at that particular video to see if there's a better way to cover that.

Regards Andrew

I got stuck on this exact spot as well. I went back to pattern my code after the video. Then I found a reference to this exact thread later in the Forum.

var map;
var bounds;
var geocoder;
var center;
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 = new google.maps.Geocoder();
var bounds = new google.maps.LatLngBounds();
function addMarkerToMap(location){
var marker = new google.maps.Marker({
  map: map,
  position: location
  }); markers.push(marker);
  bounds.extend(location);
  map.itBounds(bounds);
}
var geocoderOptions = {
  address: "Magic Kingdom, Disney World"
};
geocoder.geocode(geocoderOptions, function(results, status){
    if (status == google.maps.GeocoderStatus.OK) addMarkerToMap(
    results[0].geometry.location);
        })

It took me reading this thread to the end to realize that I needed to change my variable "map" to "theMap" under the google.maps.Marker object in line 19 to make it work. I kind of understand it a little better, but still not too much.

Also change line 23 to theMap and the fitBounds method. If confronted with this in a live development situation, Andrew, would it be considered bad practice to look up documentation and examples of it elsewhere, such as in a tutorial or forum such as this one or Stack Overflow?

I ask because my Javascript and JS libraries are the weak link in my chain, something I am working diligently on this year.

Right! The code challenge engine was being a real pain and I couldn't use the variable map but had to call it theMap.

So using the method from the video (which is only one possible way of implementing this challenge) you'd change map: map, to map: theMap, and map.itBounds(bounds); to theMap.itBounds(bounds);.

Google, documentation, StackOverflow or any search result could offer a further insight in to things and are total legit if they help you solve your problem.

For example tonight, not to derail the thread with my personal antics too much, was experimenting setting up a BitCoin mining script in Python. The forum announcements and guides were way out of date, versions of X and Y had changed and the instructions weren't always the best practice or going to the original source. But after much digging, finding the original software authors git hub repos, issue trackers and deciphering the right bits of stack traces I got it working. I used every ounce of everything I am and I still don't fully understand what's going on, but it's working, and if I need to set up another machine, I'll be that little bit faster next time, and I'll probably pick up more context and understanding of the system as a whole and more information about the bits and pieces that put it together.

It sounds to me you're dedicating in cracking this JavaScript nut, and I'm sure you will. That's the real secret of becoming great at something, is keeping at it.