Google Maps JavaScript API Episode 2 - Map Types and Creating a Custom Map

hey everyone welcome to the second video in my javascript maps api tutorial series where in this video we're going to be going over the different types of maps that we can display using the maps javascript api so by default there are four types of maps available within the maps javascript api those are roadmap which is the default map type here we have satellite which displays google earth satellite images which you can see if we click on this we have hybrid which displays a mixture of both normal and satellite views and we also have terrain which displays a physical mapped a physical map based on terrain information and so the information about each of these map types is held by google's map type interface and the map type interface is essentially responsible for translating real world coordinate systems to coordinates on your computer screen so essentially it converts real world latitude and longitude to pixel coordinates along with the default map types provided by google we can also create our own custom map types which will be which we will be doing later in this video for now we are focusing on the basic map types provided by the api so let me go back to the default which is just roadmap and so the way to change the type of map being displayed is through the map type id property of the map object and one way to do this is through the map object constructor so you know we have our map object here and we have our map options that we pass in so we can change that we can add some keys into this to change the map type and actually for this i'm going to copy and paste this and make a second file called video to html so we can have the first one saved and then i'm gonna close out of this and open up another one here and then close this so let me show you this so the key to change the map type is called map type id and then we can pass in the map type we want so say i pass in satellite you can see now it loads as a satellite view so of course whatever string we put in here what was the other one i think terrain so if we do train you can see we get the train map so we can get rid of this so we can change our map our map type through the constructor remember we pass this map options to the map object that we create and we pass it in here into the constructor and then there is also another way we can change the map type and that is using the function where did that go that is using the function set map type id and then of course we can just pass in the string what we want so you can see again it changed it to satellite so it should be noted that when we do this we aren't actually setting the map type directly the map type id references a map type this will become clear when we create our own custom map but for now just keep this in the back of your mind and now another cool thing we can do with these map types is 45 degree imagery and this is done with using the method um [Music] set tilt like this so then we pass in say we want the tilt to be 45 so we put in 45 degrees and so you might be wondering what tilt actually does and so of course so let me um show you this by zooming in a bit more or sorry the other way so 16. let's zoom into our map more let's change the map type to satellite and you can see how it looks 45 degrees you can see how everything's kind of tilted around let's see what happens if i set this to zero you can see now we're we have a top view but we can say pass in 45 and we get a cool view like this and then another cool thing we can do is we can actually get the tilt from our map object so let me actually create another let's do an h1 tag here let's give the id just info and if we do something like this document get element by id info and we set the inner html of that to map dot get tilt so this method will show the tilt so you can see right here we have 45 degrees and let me just put this on top so i can do that of course by using flexbox direction column and cool we have 45 up there so that's just how we can retrieve the tilde and also i think let me zoom in so you can see this better i don't know if that was zoomed out too much but so that's what tilt is that you can do with maps but let me just let you know that this tilt is only applied for certain locations so you can't use this tilt of 45 degrees everywhere and it is only supported by the satellite and hybrid map types at zoom levels of 12 or greater so if you zoom out past um 12 so let's say we do 11 you can see we don't have a tilt anymore but we can if we were at 12. so make sure that you are in either satellite or hybrid map types and zoom levels of 12 or greater for this to work and now another cool thing we can do when our map is displaying 45 degree imagery is change the map's orientation and this can be done through the set heading method on our map object so let me do map dot set heading because remember this map object here represents this whole map and then what we passed this method is a number that is expressed as degrees from north so say we pass 180 degrees and let me zoom in to make this better let's do 16 again so if i pass in 180 degrees that means we'll be facing south because of course north is this direction so let's see what happens if we do this you can see now we're facing the other way and if i of course do zero in here you can see we rotate around but so now now i've just shown you a few methods that we can do with our maps and also the built-in map types i want to start talking about creating our own custom map but before we do this we need to know about the map javascript apis map type registry so each map object has a map type registry that contains the map types available for that map object so if we created another map object here that would have its own map type registry so creating a map object implicitly creates a map type registry we can alter this map registry to select the map types that we actually want available to the map object in other words if we want to apply a custom map type that we made to our map we need to add it to our registry also we can make map types such as satellite unavailable to our map object by removing it from the map type registry so essentially whatever map types are in the map type registry can be applied to our map this will make more sense as i demonstrate it so don't worry but so first let me show you what happens if we remove the satellite map type from our map type registry and this can be done by modifying the map type control options and then passing in an array of the map types we want available so this will make more sense when i show you but so what we do is we use the key map type control options and then we pass in another an object and we pass the key map type ids and then this is an array of the ones that we want available so if you can remember the default map type is road type or road map and say map type control options are these here so these things right here so let's do see what happens if i just save it like this you can see those are gone and now the only option we have is roadmap so that's kind of similar to what would be like if you removed a map from the map type registry of a certain map so then say we want to actually have allow hybrid and we save this you can now see we have hybrid appear and so we can click on this which i think hybrid will switch based off like i was zoomed in or it's a it's a hybrid of um or sorry it's a hybrid of just satellite views and then the regular default road map so now when it comes to creating your own custom map this essentially means changing the actual display of roads parks buildings and things like that so for example you could have a halloween themed map or a christmas themed map or whatever you can think of and this can be done two different ways using the google cloud console so this here that we've been using let me close out of this tab or using json style declarations and what we're going to do is we're going to start with json style declarations first and this essentially means changing the style of the map using json syntax specifically to apply styles to a map you create an array of map type style objects and each of these objects describes how a certain feature such as roads parks buildings should look so what we're going to do is let's create our let me get rid of this but let's create our array and name and name it map type styles array so i'm just going to do var map type styles array set equal to an empty array and now if you remember this array or as i said just a second ago this array should take map type style objects and map type style objects are objects that contain the keys feature or actually let me probably easier to see if i do it this way and these so this is a map type style object in this array and it takes the keys feature type just leave these as empty strings for now element type and then also stylers which takes an array and also it should be noted that the feature type and element type keys are optional while the key stylers here for a map type object is required so the feature type key selects the map features to be styled and these features are geographic characteristics such as roads parks bodies of water etc so if you don't specify a feature type then every feature type will be selected and this is why the key is not required because it will set select everything by default however of course this is best demonstrated with an example um let me zoom out let me also i'll just leave it like this for now but so let's say we wanted to style all the bodies of water what i would do is i would set the key in here to water and i will post a link in the description of all the features available for customization but essentially these features are administrative which selects all administrative areas landscape which selects all landscapes poi which selects all points of interest roads which selects all roads transit which selects all transit stations and lines and water which selects all bodies of water and most of these features have more specific features nested inside them that can be accessed using dot syntax for example say you wanted to style all the highways what you would do is you would do something like road dot highway for the feature or if you wanted to select all man-made landscapes you would do for the feature type um landscape dot man made but so all these of course are going to be in that link that i post because i'm not going to be going over all of them because quite a bit but yeah but now let's work with our next key in our map type style object and this is element type so elements are subdivisions of a feature for example a road consists of the text representing the road and the actual line that represents the road so if i zoom in you can see like here s ashland avenue we have the road we also have the text that represents it so let's just say um let me refresh this so we're back to our zoom level but let's say we want to change the text that represents bodies of water we would pass in to element type labels and this selects the textual labels associated with the specified feature which here is our body of water so this is saying we want to style the text over bodies of water and so just like features or just like feature type there are multiple options and these options are geometry which selects all the geometric elements of the feature which essentially means the shape and also labels which selects the text labels associated with the feature so then once again we can specify what we want to style even further using dot syntax so we want to style the text of the label so we would do labels dot text and then once again all the options will be available in that link i'll provide in the description also let me show you where the text is in the water so if i zoom in here you can see we hit we see we have monroe harbor so this right here is saying we want to style the text that is over at this body of water which is this right here but now the final key i want to go over for a map type style object is stylers and so what you provide to stylers is an array of objects so i'm going to do another thing like this and so each object in here is a styler and as the name suggests stylers are formatting options for map features in other words you can change things such as color saturation visibility and a few more so let's say we want to change the color of the label text on bodies of water to red then what we would do is we would pass it the key color and then we pass in hexadecimal value and red i believe is ff1234 like this and so now actually i defined this in the wrong area because what we want to do is we want to pass this the key styles and this takes this array here so let me declare this above our map options and then pass in map type styles array and now let's zoom in see and you can see now that we have monroe harbor is i'm the color red so let me change change the color just to show you how it works in real time let me do maybe 16 for zooming in and it's red still let's change it to this color here and let's move over and now you can see we have purple like this so as a quick side note it should be noted that the color that you provide here must be a hexadecimal value so it can't be a word such as red and once again the list of customization options will be in that link provided in the video description but now let's just practice with this a little more so these this is remember this is the key where we pass our map styles array and these are all the features and stuff that we want to change so let's make another object here and let's do this time let's let's make all the let's say let's make all the highways to be black so i'm going to do or it's not feature it's feature type i'm going to do road because a highway is a road or a subset of one so we do road highway and then for element type we're going to do geometry this time because we're not working with the text or anything and we want to change the fill of it and then what we want to do is for stylers we pass an array of objects and for the color of this black is just all zeros so one two three one two three so if we do this you can see now our highways have been changed to a black color and let me zoom out to make this more visible so you can see we've done that and now let's do another thing let's um let's turn off the visibility of all man-made things so to do this we're going to create another map styles object and we're going to do feature type to be landscape dot man underscore made we're going to do the element type to be fill again fill and instead of color this time inside here we're going to do something visibility and just set that to off and so let me look up um what even are some man-made things around here well just know that this will set the visibility of some man-made things or man land man-made things to be invisible but so it's cool how we can customize the map this way using json syntax but lucky for us google has also provided a way to customize your map using their google cloud platform so instead of hard coding all these values we can use a nice interface to style our map so let's create a custom google map using the google cloud platform so i'm going to do is i'm going to maximize this and i'm going to go to our console or go back into the console so to link the map that we will make in this google cloud console with our web page we need to use a map id and a map id is a unique identifier that represents an instance of a google map so earlier if you can remember we were using a map type id to change the map not or map type id to change the map not a map id but so let's go to our navigation menu our google maps platform remember i pinned it which is why it's going to be up here and we're going to go to map management then from in here we're going to do create map id so now let's name our map i'm going to say just call it my practice map and the map type will be javascript of course because we're doing the javascript api and then for i'm going to leave a description blank and then we have the option raster or vector and so maps are loaded as raster by default meaning the maps are loaded as pixel based raster image tiles and vector type on the other hand is composed of vector-based tiles that use webgl to make 2d and 3d graphics we're going to choose raster basically because not all web browsers support webgl so if you're design between those two that's just why i'm going with raster because not all web web browsers support webgl but so then let's press save we can see we have our map id but now what we need to do is so we've created our map id now we need to create a map style and a map style is essentially the map we are creating a map style is just applied to a map id so map styles are cool because we can apply the same map style to multiple map ids so meaning we could have one map style and then we could have just lots of ids representing it but for now let's just create a map style so we're going to go back to the navigation menu google maps platform and then we're going to click on maps styles which is here and then we're going to do create style and so this is where you select the base map that you will be styling you can also see some cool options such as optimizing it for real estate retail things like that and you can also see how we can import json style or import json to style the map which is exactly like we were doing earlier but this is just a starter template the end result of any of these options could be the same depending on how you actually style it but for now let's just click save i'm just going to use the default options and let's give it a name let's do practice map style and let's do save and so you can see this is where we would associate our map id with this style but for now we're going to do that in a bit so for now let's just skip this and click on customize style and so this is where we can do everything we did with our json style but with a simple user interface but so let's go to chicago which is where we were doing it earlier so chicago illinois but you can see on the left navigation bar you can see what it lists is our feature type first so we've got administrative landscape points of interest so if we go back in here you can see we had landscape road and let's look in here you can see we have road um did i say landscape yeah we have landscape and we have water so these are our feature types and then you can see the more specific ones are inside here so what did we do we did water and then labels.txt or sorry let's do this one we did road and then dot highway so if we look in here and we look at road you can see we have highway so you can see it's basically in a tree structure where the more nested it is the more specific it is for example you can see transit and then the type of transit could be line and then it could be rail or ferry or even routes but let's click on transit and then let's click on and then let's click on rail and now that we've clicked on it you can see the element type so we have feature type here now you can see the element type appears and you can see we have geometry and labels like we talked about in our json styling so we have geometry and labels so for road highway we have geometry then we have fill and stroke so say we want to change the fill of our transit rail to blue we can just change the color so let's click on fill and let's just do yeah a blue like this and now if we zoom in so i don't think we're zoomed in you can see now we have our transit rails are all listed as blue and of course we could have done the exact same thing in here but it's just uh easier to do with this interface or now let's say we want to change the visibility of our icons for parks so let's go to first let's see where a park actually is we've got jason andrew park here let's go to [Music] where would it be i think it'd be under points of interest and then park and then under here let's select icon and for the icon let's do set visibility to be off so if we zoom in um i think they had some kind of let's change it back to on actually and see so you can see right here we have this little forest or a little tree thing and you can see they all disappear if we change the visibility between on and off so that's just some more customization so now let's just change one other thing let's just because i'm not going to go really in depth on this i'm just showing you this is what you can do let's do geometry fill let's do like red so now we can see we have we've changed all the bodies of water to be red but so like i said i'm not going to go too in depth on what we can do here is it's a fairly self-explanatory you can just play around but now what we want to do is let's save our map style so i'm going to click save up here and then what we want to do is link it to our map id that we created so let's click publish so we can see now our style has been published so we can use it and now let's go back over to our navigation menu google maps platform and then we go to map management and you can see we have our map id right here so let's click on this and then you can see we have map styles associated and if we click on this you can see we have that map style that we saved and published so let's click on that you can see our beautiful style that we made here with the blue rails and the red water but let's click save right here and now map updated successfully and now let's copy our map id so what i'm going to do oh right here click copy to clipboard and to link it with our website so if we do this where'd it go open up this here let's open up our document and let's click refresh and now what we do is to add this map id let me get rid of all this stuff if we want to add our map id what we do is we use the key map id and our map style and our map options and then we just pass it in as a string so let me save it open i put a semicolon there and now you can see what it's done is it has started to or has loaded the map style that we made or linked to this map id and you may have to refresh the page a few times for it to finally load but that's how we can relate or join our custom map that we made in here to our our website so instead of doing all those options you can see we can just use the the interface to this interface here to create our own map style and then just link it of course you can do the json here but i think that's a lot more work and it's a lot easier to just use that interface that google provides but so this is my video on map styles i hope you found it useful what i'm going to be doing in the next video is we're going to be going over markers so basically those are just little shapes that you can put on your map to just point to a specific latitude and longitude but that's what we're going to be doing in the next video so thanks for watching if you have any questions let me know in the comments but i'll see you next time

Channel: WittCode

Views: 579

Keywords: google maps javascript api, maps javascript api, javascript, wittcode, WittCode

Id: on77tPWYmkw

Length: 26min 19sec (1579 seconds)

Published: Tue Sep 28 2021