7 days of WordPress plugins, themes & templates - for free!* Unlimited asset downloads! Start 7-Day Free Trial
FREELessons: 19Length: 1.7 hours

Next lesson playing in 5 seconds

Cancel
  • Overview
  • Transcript

5.2 Geocoding

It’s not always intuitive or useful for users to have to put in a latitude and longitude for each map marker. In this lesson you’ll see how to refactor this function to allow an address or location to be used as well.

Related Links

5.2 Geocoding

So, currently, whenever we wanna add a marker, we have to do it by calling this addMarker function, and passing through a lat and a long. However, what we'd really like to do, is actually pass through an address, or a place, and get a marker added by that. And this concept is known as geocoding. So, in this lesson, we'll take the Google Maps geocoder service, and we'll write it into our Mapster library. So right now it would be a pretty cool feature for the user to be able to call addMarker. And rather than passing through a lat and a long, they can pass through a string. And we can call it location. And they can pass through the location that they want the marker to land on. So currently this won't work. So let's see if we can build this into our API. So to to get this to work, we have to build up a geocoder. So up here at the top, we'll create a geocoder, and it's no different than any other object we've created, so we have a new google.maps.geocoder. And the geocoder will take any parameters in. And down here we'll create a function, and we'll call it geocode. And since we have access to this geocoder, we're gonna call the function on the geocoder, which is also called geocode. And the first thing that the geocoder takes, it takes in an address, and then it takes in a callback function. And the callback function returns the results as well as the status. And when you're checking a geocoder, you need to make sure that the status is okay, and that it didn't fail. So we need to check to see if the status, is equal to an okay status. And to do so, we can tap into an enum within the Google Maps name space. And that's the geocoder status. And we can check to see that it was okay. And if it was okay, we'll console.log the results. Else will console.error the status. So down here we'll call geocode, and we'll pass through the address, and the address is the Golden Gate Bridge. So in the console we see that we have this array of one object, and if we open it up, we can see that we have these address components. And the address components provides us of what it is. It's the Golden Gate Bridge It's in California, United States, and this is the zip code as well. And then right here is the formatted address, and then the types is that it's a point of interest, and also an establishment. So, as you can see, we get some metadata about our location as well. So know we can tap into geometry, and it tells us that the location type is approximate. But what we're interested in is the location, and this is the lat and the long. So from here we could add a marker. But rather than just adding a marker inside of this if statement, we can fire off a success callback. And the same goes down here for the error. You can fire off an error callback. And for the error callback, we just need to return the status. So now then on the geocode function, we'll provide our success callback, and then we'll provide one for error callback as well. And this might look a bit familiar to you if you use jQuery. When you do an AJAX call, you can provide a success and error callback. And this is set up the same way. So from within here, we can add a marker. We can tap into our Mapster, and then using the results, we can provide the lat and long. So we'll get the first result because we're only getting one back. And we need to call result.geometry.location, and then call the lat function. And then we need to do the same thing with the long. And you can see that we actually get the marker dropped on where the Golden Gate Bridge is. So this right here is the scaffolding, for us to use the geocoder function. It's an asynchronous method, so we have to provide a callback for a success, and a callback for any error. But within it, if we get a good response, we can then return these results. And these results are array of places that came up through the search. In this case, since there's only one Golden Gate Bridge, we're just getting one result back. And from within there, we can grab the location, and that gives us the lat and the long, to add a marker. So we'll comment this out, and we'll implement it in our Mapster. And just like we're checking for the cluster, we'll check to see if we're geocoding. And if we're geocoding, we'll set the property for that. So now I'll go into Map Options, and we'll set that to true. So we'll create a function, and we'll call it geocode. And that'll take in some options. And within that function, we've just pasted in what we wrote in the previous tab. And this does the same thing. It just attaches it to the Mapster library. So now that we have the geocode function inside our Mapster library, we'll modify the ad marker for our jQuery widget. So, if we have a location attribute, we know we're going to use the geocoder. Else we'll just add the marker by the options. So now we'll call this .geocode. And we'll set the options. So we'll set the address to opts.location, and we'll set a success, as well as an error callback. [SOUND] And since we're gonna be inside these callback functions, we'll set a self variable. So inside the success callback, we want to iterate through the results that we get back, and add them to the map. So we'll fire off the for each function on the results array, and for each one of the results, we're gonna add the map marker. But first we need to set the options. We'll set the opts.lat equal to result.geometry.location.lat. Then we'll set the long. And then we'll call self.map.addMarker, and we'll pass in through these options. And the reason why we're tacking the lat and the long onto the options, is that the options contain other things that we wanna fire off such as events. So it just makes sense to modify the lat and the long,rather than have to carry out all of the options onto another object. And now we'll go back into Mapster, and one thing that we'll error out on, is we're not calling this.geocoder. So, now back in our jQuery widget, when we're adding a marker, we're gonna check to see if there's a location property on the options. If that property exists, we know to geocode. If it doesn't exist, we're going to add by the original options. So, if we geocode, we'll pass through the location as the address, and then we'll fire off a success callback, where we iterate through all the results. We set the opts.latitude and longitude, and then we pass that through adding the marker. So now in our main script file, we'll un-comment this, and we can see that we get something on the Golden Gate Bridge. And a cool feature of this, is that we're iterating through all of the results that come back from the geocoder. So if we provide something generic like 1111 Main Street, now when we zoom out, we're getting all the 1111 Main Streets that come up from the geocoder. Now, this now have some unintended consequences for you, but this can be offset by being very specific within your location. And also, since we provided the geocode function on the Mapster library, you can tailor a more custom function, within the jQuery widget.

Back to the top