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

3.1 Map Markers

Markers are one of the core features of Google Maps. In this lesson you’ll learn about how to create and customize them.

Note

The Map Icons Collection author has requested that we not hotlink to icons, but instead host our own copies of them. Simply save the icon images that you want to use to your project folder and refer to them with a relative URL, ie. <img src="mapicons/drink.png"/> Check out the course GitHub repository for an example.

Related Links

3.1 Map Markers

So now that we know how to set up the map and fire off events from it, let's focus on adding markers to the map. So within our main script file, let's create our first marker. And just like how we've done previously, we're gonna tap into the Google Maps namespace. So we can say new google.maps.Marker. And then this marker will take marker options, just as a map takes map options. We're going to want to know the position of this marker. And a position is just like a center, it has a lat and a long, because actually a position in a center is the same type of object. We've just been passing through an object literal of a lat and a long, but it's actually a type of google.maps.latlong. This object down here is essentially what we're building up, but Google Maps actually initializes this lat long object for us. So, now that we have the position down, we should see it appearing on the map, but we don't see anything. And that's because we haven't actually set the marker to the map, so there's a property we can set called map. And we can set that to map.gmap. And now you can see that we have our marker. And by default, this is how your markers look. If you want to customize your markers a little further, then you can specify the icon property, so within the icon property you can set a URL to the image you want your icon to be. There's a really nice map icons website out there, where you can grab custom icons and use them on your Google maps. I'm just gonna right click one of these latest icons, and I'm going to copy the image URL. So now within the icon string, I'm going to paste in the URL and we can see that we now have this custom icon. So let's say we wanted to add another map marker, we use a different icon, and now you can see we've placed two markers on this map. But, every time we wanna add a marker, you can see this is kind of a big process. And we're actually still directly tied in to the Google Maps library. So let's take this and add this into our Mapster library. So at the bottom of our Mapster library, we'll create a function. And we'll call it underscore create Marker. And we want it as an underscore because we want it to be private. This function is only responsible for creating a marker that gets added to our map. So what we'll do is return a new google.maps.Marker. But within here we want to set some options, so create a variable for the options. And we'll set the position and then we'll set the map. So then we'll pass through the lat and the long and now above this we'll create another method and we'll call it add marker. And within add marker we'll call the create marker function. So now we'll go to our script.js. And now using our Mapster library, we'll call map.addMarker and we'll pass in the value for the lat and long. And then we'll go back into the Mapster, and we'll make sure to pass through the lat and the log. So now we can see that our addMarker is adding this marker to our map. And this function is a lot easier to use than building up this marker from scratch. However, right now it's not really customizable, if we wanted to add a marker that was dragable, or customize the icon, we would have to pass through another parameter. So if we wanted to make it dragable, we could pass in another parameter and call it true. And then we could go into our mapster and then in the add marker function we'll provide a parameter for draggable, and we'll set that on the create marker function as well, and then down here in the marker options, we'll set the draggable property as well. So now we can go through and we can drag this marker around the map. So it's a little bit more customizable now, but if we want to change the icon, then we'll have to go add another parameter, all the way down. And every time you wanna add an extra property, this seems like a pretty long-winded way to do so. And also, if we wanted to set any events onto this marker, that would also take another parameter. So, in the next lesson, we're gonna refactor this out so we don't have to pass through multiple parameters to customize our markers. And then we'll also focus on adding events to our markers as well.

Back to the top