Styling Google Maps
Before we move on and start actually to build our own costume elements and dig into oop in JS let's add some customization to our map. Our goal will be to dynamically change the colors of our map and gray scale it. To do this its very easy although it will take us 3 steps. Our first step is to create our styling object, then we name our styling object and lastly we define our current view of the map to our new styled view. By the end of this session you will know the basics of styling in Google maps.
Video Transcript
00:02Before we move on and start actually building our own custom elements and digging deeper into object-oriented programming,
00:09how about we do a little bit more of
00:12stylization to our map. What I want to do is I want to take this map and just turn it to be kind of like a
00:17grayscale black-and-white map. To do that, I could actually modify the actual colors of the road map itself, and to do that
00:25it's really really easy. There is a few steps involved, actually three steps.
00:29The first step is to define our color scheme. So to do that, I'm just gonna
00:34literally we're gonna do the really most basic variation of it. I'm gonna create a new variable, a gray
00:39I'm gonna call it, or gray, and
00:42it's gonna be an array. And again, we're creating an array literal, but if we wanted to we could have created a new array.
00:48Now in this array, we're gonna put in a literal object.
00:51So I'm gonna open here a nice literal object, and within this object
00:56I'm going, and by the way, the reason is because we could put multiple elements in this array.
01:00We're only gonna be putting one because we're gonna try to affect
01:04globally the application, or globally the map. And if you want to learn more about about this topic in general,
01:11I strongly recommend you to check out my book
01:15Through Packet, which is called
01:18JavaScript Data Visualization, which is a really really great book if you want to get into data visualization,
01:24which it really spends a whole book covering topics such as Google Maps and more into depth.
01:29Or go right into the Google API and dig in and start playing with it.
01:34All right, so right into into what we want to do, I'm just gonna create a new stylers.
01:40It's gonna look weird, but it's gonna be an array and inside of that array
01:44we're gonna have an app object. And all I'm gonna be doing is gonna be setting our saturation to be minus 100,
01:51and then we're basically stripping out all colors besides black and white from our elements.
01:57So we're just gonna have a grayscale map. And literally what we did is we kind of affected by
02:03doing this, and it looks kind of weird.
02:05You don't have to really understand it because like that would be a
02:08off-topic and it would take us quite a while. All we're doing here is we're defining basically a color rule, and it's a very very
02:15advanced capability similar to CSS.
02:19But what we're doing is we're just doing one things, and that's the reason why it's so many
02:24objects inside of arrays, inside of objects, inside of arrays. To learn more about it,
02:29you'd want to check out our book from packet, which I believe is chapter
02:34seven or eight in the book.
02:37And all right, so that's step one. We created a grayscale. The next step for us is actually to create a
02:43styling, a Google styling object. Again, going back to the, so I'm going to call this gray style.
02:51And for our gray style, I'm going to create a new google.maps.styledmap
02:58type.
03:00Styled map type, cool. And I'm going to set in and send into an array.
03:07And right after that, I'm going to put inside here a new object, a new literal object inside of it.
03:11And I'm going to set a property called name, and I'm going to give our style a name, and I'm going to call this gray.
03:19All right, so our style is called gray, and we are set to go.
03:24All right, so all that's left for us is now to link this new grayscale
03:29element. So we created the actual CSS, we then defined a new Google style map type object using the new and
03:37created it based out of a constructor that is invisible to us right now. And by the way,
03:42I really strongly recommend when you finish our title
03:45to revisit these earlier videos because they're going to make even more sense once you actually know how to create your own styles.
03:52All right, now the last thing that we have left is after we create our map,
03:55I'm going to go right after our map in line 16, and I'm going to go to our map itself and add a new map type.
04:00To do that, I'm just going to go into the map types
04:03property, and I'm going to set into it a new property, and I'm just going to call it gray, and
04:09gray is going to take in our gray style object, and again, I'm going to go to our map, and I'm going to set
04:16map type ID.
04:19Again, lowercase with that letter ID, and I could then set whatever style I want. In our case,
04:26I'm going to set it to be gray, and
04:28if I save this, go right to our browser, refresh, our map should stop working.
04:34Cool, so first of all, once we open up our error message,
04:43we could see that it can't find the A gray, and that is happening in line 7,
04:47so thank goodness for some good error management. And in line 7, it's basically telling us A gray doesn't exist,
04:54so let's double check that. Let's make sure that our array is built legally, so we could see that object, that looks good,
05:00that looks good, that looks good, A
05:03gray. Oh, okay, it's A Gary. Yep, we don't have an A Gary. I'm going to click and save that, go back into Safari,
05:10refresh again, make sure that our
05:13error council doesn't show us any errors, and you can see that now our map is black and white, and we've succeeded with another task.
05:19So let's just look at this again, and I know a lot of this is a little bit magical.
05:24First of all, this is already easy to understand.
05:28We're using a constructor that is enabling us to create a longitude longitude object,
05:32which Google actually needs to be able to define where will our map be.
05:35We then create an array which looks really weird with an object and another object, and it's a very in-depth object.
05:42The reason I'm not digging too deep into it is just because it's actually, there's a lot of things you could do with it.
05:46You could actually control literally the colors and the elements of specific types of things such as trees and oceans, and
05:53color the ocean red if you want, and stuff of that nature.
05:57We don't want to cover that because that would take us too long.
06:00So I'm just setting it and you could just copy this to set up all our saturation to be
06:05minus 100, or if you wanted to you could change it and play with the saturation, or you and any other of those properties.
06:11And again, you probably want to go to the Google documentation or book from packet,
06:15which is called Data Visualization. I'll leave up a link on our web page once it's released as well.
06:21We then create a new grayscale object using the google.maps.styled map type.
06:27Once we create that and we give it a name, the next step for us is we want to set that grayscale to be in the list of
06:35possible options of different types of map types. To do that, we go into our map that was created, go into the map types,
06:43and then we set a new map type sending in that new gray style that we've just created, and
06:48we give it a name, another name.
06:50This is by the way a visual name, so if we had any buttons that enables the users to change maps,
06:56this would be the name of our style. In our case, no one could ever see it. So it doesn't really matter. In
07:01line 17, we're actually telling Google we want this to be the default map.
07:05We want to set our map to be this map right now instead of the map that was earlier,
07:10which was the road map, which by the way, our map is a map, a road map, only a variation of the road map.
07:17Alright, and that's all we have to do to set it up and get it in motion, and
07:21that's how we got our grayscale map.