WiscWeb - WordPress UW Theme - Create and Embed A Custom Google Map

This document will walk you through the process of creating a Custom Google Map, and then applying that map to your WordPress site.

To begin, go to http://maps.google.com, and be sure to use an account that is not a personal Google account (for example, a departmental account that you have attached your Google Analytics (WiscWeb - WordPress UW Theme - Adding Google Analytics To Your Site ) or Google Custom Search Engine (WiscWeb - WordPress UW Theme - Adding A Custom Google Search To Your Site ) to). Click on the hamburger (Hamburger Menu icon), choose Your Places from the list, click on the Maps tab, and choose Create Map from the bottom of the screen.


Google Maps Tabs


Create Map Button



A new window will appear. Click in the upper left portion of the screen on Untitled map to give your map a name, as well as add a description for the map itself. Enter that information and click Save.


Untitled Map Dialogue Box Enter Map Title and Description


With your map titled, you can now begin adding points using different options. You should zoom your map into your general starting location (Madison, Wisconsin, for example), and you can start by clicking on points of interest that are suggest on the map itself. Once you do that, you can click on Add to map.


Camp Randall Pin



You can also add pins to your map by click on the pin icon (Add Pin Icon) at the top of the screen, and dropping it at a location of your choice on the map itself. Once you do, you can give the pin a name and description. Click Save to commit this pin to your map.


Bascom Hill Pin Addition



Once you have placed pins or chosen specific locations, you can change the style of the pin, add an image, or trash the pin by using the options bar that appears when you click on it.


Pin Options

Once you have finished adding your locations, you can share this map by clicking on the Share icon Share Map Icon, and set the options you’d like for sharing this map. For example, you can click Change… and set the value to On - Public on the web. Once you have done this, you can now take your map and embed it in your WordPress site (Note - you will have to set the sharing value to On - Public on the web for this to work).


Click on the vertical ellipsis next to the name of your custom map, and choose Embed on my site.


Map Title with Vertical Ellipsis

Map Ellipsis Options


You will be given the embed code that you should copy. This is the code that will be used to place the map visually on a page within your site. Now go to your WordPress dashboard, find the page that you are going to place this map in and open it.


Within a Text Block, click the Text tab to access the code space. In the text field below, paste your embed code.


Embed Map HTML Code


Once you’ve entered the information, be sure to click Update to publish this to your site. Check the page to make sure the map appears. Explore some of the options available in this embedded map as well.


One thing to note is that your map’s dimensions by default are 640 pixels wide by 480 pixels high. You can increase the size of your map by double those two dimensions (1280 wide, 960 high).





Keywords:map, google, custom, location, pin, create, places, site   Doc ID:71469
Owner:Matthew G.Group:WiscWeb CMS
Created:2017-03-07 13:40 CDTUpdated:2017-03-07 16:19 CDT
Sites:WiscWeb CMS
Feedback:  1   0