How to Create Custom Maps in Google Maps | Tutorial | UC Berkeley

How To Create Custom Maps using Google Maps

In this tutorial, you ’ ll learn how to create a map using Google Maps ; how to customize that map manually or by importing data from a spreadsheet ; and how to publish it on your site .

Create a basic map

get down by heading to .
Click on the menu icon on the top left handwriting side of the screen and choose “ Your Places. ” ( The menu icon is just to the left of the search measure on the top left handwriting side of your blind. )

Your Places
Select the maps tab key. Navigate to the very penetrate of that windowpane and choose “ Create a Map. ”
Create Map
This will open a function in a new pill that you can customize in one of two ways : by drawing points and shapes manually or by importing a spreadsheet .
Basic Map

Customize your map by drawing

Let ’ s beginning by drawing – that is, manually creating points or shapes – on your map .

Add a Marker

To create points on your function, just select the “ Add Marker ” creature near the search bar, then click the stead on your map where you want the steer to go .
Add Marker Tool
Give your point a title and a description when prompted, if you ’ d like .
Marker Title and Description
You can adjust the color and the icon style for the point you precisely created by clicking on the paint bucket picture. This will show you assorted color and icon options .
Customize Marker
By nonpayment, Google will show you its most popular icons, but there is besides a whole icon library that you can explore by clicking “ More Icons. ” ( You can besides import a custom-made icon from the web, using resources like the Noun Project. )
Another way to add a marker to your map is by searching for your hope location. When your searched placement appears in the pop-up book window, click the “ add to map ” clitoris to create the new marker on your map .
Search for location
Add Marker by Search

Create Lines and Shapes

You can besides create lines or shapes on your map a well by clicking the “ Draw a Line ” instrument. You ’ ll see several options from the dropdown menu, including ones for creating drive, bicycle, and walking routes. For the moment, let ’ s just use the “ Add a credit line or supreme headquarters allied powers europe ” instrument .
Draw a Line Tool
To create a line, merely click along the map where you want your line to be .
To create a determine, click along the map and be certain to connect the dots to create an enclosed determine .
precisely like a marker, you can add a title and description to your line or form. Once you hit save, you can besides adjust its coloring material, telephone line or boundary line weight, and transparency by clicking on the key bucket .
Example of Shape

Add a Photo or Video to Your Map

You can add a photograph or a video to any marker, line or condition that you create on your function. To do so, cluck on your marker or supreme headquarters allied powers europe and find the photograph icon .
Add a Photo Tool
A popup window will appear and you ’ ll see several options that allow you to :
1 ) Upload a photograph file from your calculator or from your Google drive
2 ) Take a photograph with your web camera
3 ) Add an image from the web via url or via Google Image Search
4 ) Add a YouTube link via url or via search
Add a Photo Window
once you ’ ve chosen an image or video recording link you ’ d like to use, hit save and it will be added to your marker or supreme headquarters allied powers europe. You can besides create a drift with multiple images and/or video links by clicking on the “ + ” button on the bed correctly hand side before saving .
Photo Gallery

Customizing the base map

Take a look at the left hand slope of your riddle. You ’ ll notice a box that shows data about your map, a well as the the diverse layers that comprise it .
so far, all the changes we ’ ve made have been to a layer on crown of the map that we see. But you can besides change the style of the map itself. To do so, click the humble arrow next to the “ Base Map ” layer. You ’ ll see several map styles from which you can choose .
Custom Base Map

Customize your map with data

We ’ ve learned how to customize our map by manually adding markers, lines and shapes. But say we have a long ton of points that we want to add to the function. You could add each marker manually, but importing a spreadsheet would be faster .
For any map you make, you ’ ll want to have your data in a spreadsheet and you ’ ll need at least one column that contains location data. That localization data can be a bare list of addresses ; city, state, area information ( e.g. “ Oakland, California ” or “ Buenos Aires, Argentina ” ) ; or it can include latitude and longitude coordinates, separated by a comma ( e.g. “ 37.8043637, -122.2711137 ” )
For this tutorial, let ’ s use the following sample data set of scholar hometowns to populate our map .
Before we add it to our map, let ’ s take a immediate look at the data. The spreadsheet has 4 column : one for the student ’ second name, one for their hometown, one for their assign J200 course, and one for media concentration .
To upload the spreadsheet to our map, we ’ ll need to first create a level by clicking “ Add a layer ” in the left hand box .
Add Layer Button
Under the new “ Untitled Layer ” you ’ ve created, pawl import.

Import Spreadsheet Button
then find and select the Student Hometowns spreadsheet. ( It will likely be in the “ Shared With Me ” or “ Recent ” check. )
Google will prompt you to select the column that contains the placement data. This is what Google will use to place the markers on the map. In our shell, the placement data is in the hometown column, so we ’ ll choice that .
Choose Location Columns Window
( If you had location data that contained latitude and longitude coordinates, you ’ d have an excess step here. Google would ask you to select the allow order of your coordinates : “ latitude, longitude ” or “ longitude, latitude. ” )
then, Google will prompt you to select the entitle for your markers. In this character, we want student names to show up as our titles, so we ’ ll select the “ Name ” column .
Choose Title Column Window
Hit polish and Google will automagically generate your map with the appropriate markers .
Data Generated Map
here ’ s what one of the markers looks like up near .
Data Generated Map Marker
bill, the markers have all the data we had in our spreadsheet : name, hometown, J200, and concentration .

Adjusting styles

Looking at our newly created map, notice that all our markers are precisely the like style : a blue pin .
You can easily adjust the style of all of the markers at once by going to the layer we good created ( it should immediately be titled “ Student Hometowns ” ), hovering over “ All Items ” and clicking the key bucket on the proper. You ’ ll see unlike colors and icons that you can choose from .
Customizing All Markers
You can besides add labels to your markers ampere well. To do then, click on “ Uniform manner ” underneath the “ Student Hometowns ” layer. You ’ ll see a dropdown menu called Set Labels with unlike pronounce options to choose from .
Set Labels Menu
Try selecting “ Name ” to see each student ’ sulfur name added to the map .
Map with Labels
But what happens if you want to change the style of just some of the markers ?
There are a couple of unlike options, depending on what you want to do .
If you want to change the vogue of each individual marker, in the “ Student Hometowns ” level, chink on the “ Group places by ” dropdown menu .
Group Places by Menu
In the popup that appears, blue-ribbon “ Individual styles ” from the menu .
Selecting Individual Styles
This allows you to select markers one by one and change its coloring material or picture expressive style .
Customizing Markers Individually
now, what if we want each J200 group to have its own color on the map ? To do indeed, we have to change the markers as a group. In the lapp menu, scroll down to the “ Style by data column ” choice and choose “ J200. ”
Selecting J200 Column
Google will mechanically choose two different colors for each J200 group. If you want to change the color or picture style for each of the groups – say you want to make Oakland North dark grey and Richmond Confidential crimson – merely hover over each group and click the paint bucket to customize .
Styling J200 Groups

Embedding on your site

So…you ’ ve played around with your map and made it precisely how you want it and immediately you want to put it on your web site. What do you do ?
first, you ’ ll want to make indisputable your function is publication-ready. Make surely to give your map a title. Let ’ s call ours “ UCBSOJ Student Hometowns. ” You can add a description to the map vitamin a well .
Map Title and Description
At this distributor point, you may want to take a expression at what your map will look like when you publish it. To do therefore, click the “ preview ” button on the layers box. A newfangled window will open with a preview of your map .
Preview Button
Next you ’ ll need to share the map publicly. Do this by clicking the “ share ” push button on the layers box and changing link sharing to “ public. ”
Share Button
end, you ’ ll want to grab the embed code. To do indeed, click the three dots on the right bridge player slope of the layers box, and find “ Embed on my web site. ”
Selecting Embed from Menu
copy and paste the HTML into the reference code of your web site and you ’ ra set !

About This Tutorial

This tutorial was written by Briana Flin .

Republishing Policy

This content may not be republished in print or digital form without express written permission from Berkeley Advanced Media Institute. Please see our Content redistribution Policy .

reservoir :
Category : How To

Related Posts

Leave a Reply

Your email address will not be published.