FREELessons: 19Length: 1.7 hours

Next lesson playing in 5 seconds

Cancel
  • Overview
  • Transcript

2.2 Map Options

So now that we know how to build a basic map up. Let's look to see how we can customize it using map options. So this is the first map we created. And we created an options object that we then put into the map constructor and that helps set up our map. It contained properties such as the center and the zoom. And there's other properties we can set as well. One of the things a lot of people don't like seeing on their map is this zoom control. And by setting the disable default UI property to true, you no longer see those options there. Another thing that annoys some people is when they're scrolling through a website. And then there's a map placed in the middle of the page. And as they're scrolling, they'll start zooming in or zooming out on the map. So to fix this, we can pass in another property called scroll wheel, and set that to false. So, now when we try to scroll, we're not going anywhere. And if you want to reverse it, you just need to set it to true, or you can even omit it. Another thing you can do is you can drag the map around. And this can be canceled out with a draggable property. So with draggable set to false, we can't move this map around. Another property people like to change is the map type. So we can set a value for the property map type ID and we can set that to google.maps.maptypeID. And then we can set it to hybrid. And you can see that's a mixture between the road map and the satellite. And we can do the same thing by setting it to a satellite. And now we see that we don't see any of the markings for the map. And if we wanna get it back to a road map, we just type in road map. You also can control at what length the user can zoom in on the page. So, currently we're at a zoom level of ten. But if we set the max zoom to a level of eleven, we can scroll down one, but from here we can't scroll any more. And we can do something similar at the minZoom. And if we set that to nine. So we can see we can scroll down and we go from 10 to 11. Then we scroll out, we can only go to a minimum zoom of nine. So, this allows us to control at what levels the user can zoom in and out on this map. So, right now, we have the default UI disabled. But if we set this to false, we can see the controls again. And from here, we can actually control the position of these controls on the page. So by setting zoom control options, we can set an object literal with that. That'll help tell us where we want it on the page. So one of the properties for this is the position. And this is an, the google.maps.control position namespace. And then we can say we want it in the BOTTOM_LEFT. Now we can see in the bottom left we have our map controls. And we even can set the style. So in the Google.maps that zoom control style we can set it to small. And now you can see that we have a small version. And if we go back to default. We see we get the larger version. So our zoom controls are down at the bottom left. But our pan controls are still at the top. So we can set our properties to move those down to the bottom as well. So just like above, instead of zoom control options, we'll do pan control options and we'll set an object literal. And then we'll also set a position. And we'll go under the same google.maps.controlPosition namespace. And now we add this into the bottom left. But we even can change this to left bottom and it moves it over just a little bit more. And these directions and places are interchangeable. So you can change this to TOP_LEFT and it goes back to the top left or we can even say TOP_RIGHT. But for now, we'll keep it to LEFT_BOTTOM. So these are just a couple of the ways you can customize your map with map options. And some of you might find this to be a pretty clunky process that you have to provide this whole nested object literal. And if you wanna be a bit more modular, you can actually abstract this object literal out into its own namespace. So we can create a new file and we can call it map options. And we'll create a self-invoking anonymous function. We'll pass through the window and then we'll also pass through window.mapster. And mapster is just the name space that we're gonna be using to create a library in this video. So we can use mapster inside of the self-invoking anonymous function. However, there can be an issue with this window.mapster down here. And the problem is is that there could be a null object. So we can do an or check and if this window. Mapster doesn't exist, we can set it to an empty object literal. So, this way instead of ourselves invoking anonymous function, we're guaranteed to be working with an object when we're using Mapster. So, inside of here, we can actually set our map options. So, we'll set it to this object up here. And now this is the same map options that we're using on the other page. So if we go back to our index and we include this. And then, we'll go back into our map-options. And one thing we don't wanna forget to do is import the Google namespace since we're using it inside of this self invoking anonymous function. So now that Google is included, we'll go back into our script.js. And just like we've done previously, we can import window.mapster and do a null check for it as well. So now, rather than setting up these options and this big object literal, we can go to mapster. And we can do mapster.map_options. And when we replace it with that, we can see that our map gets initialized with the same options. So now, rather than having that big object literal in our main script file, we've moved it out into a smaller file. And anywhere we need to initialize a map with those options, we can just call mapster.map_options. And now that code is reusable. One thing you'll notice when you're using Google Maps is that Google Maps is like a bunch of little Lego pieces. You can build all sorts of things out of these Lego pieces. However, if you want them to do specific things you're gonna have to build those pieces over and over again. So rather than building these small pieces every single time we need them. It would be smarter for us to create a custom library for us to use. So in the next lesson we're gonna build upon our mapster library and we're gonna create more methods that help us customize our Google map.

Back to the top