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 web site .

Create a basic map

start by heading to .
Click on the menu icon on the top exit hand side of the screen and blue-ribbon “ Your Places. ” ( The menu icon is just to the exit of the search bar on the top left hand side of your screen. )

Your Places
Select the maps tab. Navigate to the very bottom of that window and choice “ Create a Map. ”
Create Map
This will open a map in a new tab 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 start by drawing – that is, manually creating points or shapes – on your function .

Add a Marker

To create points on your map, merely select the “ Add Marker ” instrument near the search bar, then click the locate on your map where you want the point to go .
Add Marker Tool
Give your distributor point a entitle and a description when prompted, if you ’ d like .
Marker Title and Description
You can adjust the color and the icon style for the steer you just created by clicking on the paint bucket icon. This will show you respective semblance and icon options .
Customize Marker
By default, Google will show you its most democratic icons, but there is besides a hale icon library that you can explore by clicking “ More Icons. ” ( You can besides import a custom picture from the network, using resources like the Noun Project. )
Another way to add a marker to your map is by searching for your hope placement. When your searched location appears in the pop-up book window, click the “ lend to map ” button 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 american samoa well by clicking the “ Draw a Line ” tool. You ’ ll see respective options from the dropdown menu, including ones for creating drive, bicycle, and walking routes. For the here and now, let ’ s fair use the “ Add a lineage or form ” tool .
Draw a Line Tool
To create a wrinkle, plainly click along the map where you want your course to be .
To create a determine, click along the map and be surely to connect the dots to create an envelop shape .
good like a marker, you can add a entitle and description to your line or shape. Once you hit save, you can besides adjust its color, note or surround weight, and transparency by clicking on the rouge bucket .
Example of Shape

Add a Photo or Video to Your Map

You can add a photograph or a television to any marker, line or human body that you create on your function. To do thus, click on your marker or determine 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 computer or from your Google drive
2 ) Take a photograph with your web television camera
3 ) Add an image from the web via url or via Google Image Search
4 ) Add a YouTube radio link via url or via search
Add a Photo Window
once you ’ ve chosen an image or video link you ’ d like to use, hit save and it will be added to your marker or form. You can besides create a gallery with multiple images and/or video links by clicking on the “ + ” push button on the bottom right hand side before saving .
Photo Gallery

Customizing the base map

Take a look at the leave handwriting side of your screen. You ’ ll notice a box that shows information about your function, a well as the the diverse layers that comprise it .
so far, all the changes we ’ ve made have been to a layer on exceed of the map that we see. But you can besides change the manner of the map itself. To do then, click the little arrow next to the “ Base Map ” level. 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 short ton of points that we want to add to the map. 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 location data can be a simple list of addresses ; city, state, state data ( 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 function .
Before we add it to our map, let ’ s take a quick look at the datum. The spreadsheet has 4 column : one for the student ’ south 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 level ” in the leave hand box .
Add Layer Button
Under the newfangled “ Untitled Layer ” you ’ ve created, snap significance.

Read more : Smoked Pork Shoulder

Import Spreadsheet Button
then find and select the Student Hometowns spreadsheet. ( It will likely be in the “ Shared With Me ” or “ Recent ” yellow journalism. )
Google will prompt you to select the column that contains the location data. This is what Google will use to place the markers on the function. In our case, the localization data is in the hometown column, so we ’ ll choose that .
Choose Location Columns Window
( If you had placement data that contained latitude and longitude coordinates, you ’ d have an extra step here. Google would ask you to select the appropriate order of your coordinates : “ latitude, longitude ” or “ longitude, latitude. ” )
then, Google will prompt you to select the entitle for your markers. In this case, 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 allow markers .
Data Generated Map
here ’ s what one of the markers looks like up close .
Data Generated Map Marker
bill, the markers have all the information we had in our spreadsheet : name, hometown, J200, and concentration .

Adjusting styles

Looking at our newly created map, comment that all our markers are precisely the like vogue : a blue peg .
You can easily adjust the style of all of the markers at once by going to the layer we precisely created ( it should now be titled “ Student Hometowns ” ), hovering over “ All Items ” and clicking the key bucket on the right. You ’ ll see different colors and icons that you can choose from .
Customizing All Markers
You can besides add labels to your markers american samoa well. To do so, click on “ Uniform style ” underneath the “ Student Hometowns ” level. You ’ ll see a dropdown menu called Set Labels with unlike label options to choose from .
Set Labels Menu
Try selecting “ Name ” to see each scholar ’ s name added to the function .
Map with Labels
But what happens if you want to change the style of just some of the markers ?
There are a couple of different options, depending on what you want to do .
If you want to change the manner of each individual marker, in the “ Student Hometowns ” layer, snap on the “ Group places by ” dropdown menu .
Group Places by Menu
In the popup that appears, choice “ Individual styles ” from the menu .
Selecting Individual Styles
This allows you to select markers one by one and change its color or icon style .
Customizing Markers Individually
immediately, 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 same menu, scroll down to the “ Style by data column ” choice and blue-ribbon “ 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 black grey and Richmond Confidential red – precisely levitate 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 just 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 certain your map is publication-ready. Make sure to give your map a title. Let ’ s call ours “ UCBSOJ Student Hometowns. ” You can add a description to the map american samoa well .
Map Title and Description
At this point, you may want to take a expression at what your map will look like when you publish it. To do indeed, click the “ preview ” button on the layers box. A new window will open with a preview of your map .
Preview Button
Next you ’ ll need to share the function publicly. Do this by clicking the “ share ” button on the layers box and changing link sharing to “ public. ”
Share Button
final, you ’ ll want to grab the implant code. To do indeed, click the three dots on the right hand side of the layers box, and find “ Embed on my locate. ”
Selecting Embed from Menu
copy and paste the HTML into the informant code of your web site and you ’ ra set !

About This Tutorial

This tutorial was written by Briana Flin .

Republishing Policy

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

source :
Category : Tutorial

Related Posts

Trả lời

Email của bạn sẽ không được hiển thị công khai.