Today we’re making maps! At the bottom of this how-to, you’ll see a sample map of our own beloved Evansdale Crossing, made by following these very steps. Follow along and create your own!
Making the map
- Sign in to Google and go to maps.google.com
- Click the menu icon to the left of the search bar and select “Your Places” from the drop-down menu, then click “MAPS”
- Select “Create Map” (at the bottom of the left bar)
- In the new window, click “Untitled map” to give it a title and description
- Add places: Search a place address, click the marker, and select “+ Add to map” in its pop-up window
- Make changes by clicking a placed marker:
- Edit (the pencil icon) lets you change the title and description of a place. You can also add links () with HTML.
- Style (the paint bucket icon) lets you change the color and design of map markers. You can also upload your own designs, if you’re fancy.
- Add Image or Video (the camera icon) lets you … well, I think you can figure that one out.
- You can also add points of your own by selecting the “Add marker” icon (under the search bar) and clicking to place new map markers.
- Add lines and shapes
- Click the line/shape button and click points – double-click to finish
- Can name/describe your lines and polygons (shapes) in the same way as map markers.
- Click lines to change color and thickness
- Click polygons to change color, border thickness, and transparency.
- Trash an element by selecting it and clicking the trashcan in its window
Adding group members
- Click “share” in top left menu
- Under “Invite collaborators,” add email addresses
- Choose what they can do: “Can view” or “Can edit”
Embed the map in your blog
- Click “share” and change settings from Private to “Public on the Web” (this allows any reader of your blog to see it), then click Done.
- Placing the map:
- Position the map how you want it to appear on your blog
- Click the three dots next to “Share” in the top left menu > Select “Set default view”
- Click them again and select “Embed on my site”
- Paste the resultant line of code directly into a WordPress blog post and preview to see if it looks the way you want it.
- WordPress has changed, requiring some extra work. This next part is a little tickly…
- This code comes from the map embedded in this post): iframe src=”https://www.google.com/maps/d/embed?mid=zRA7u_2r6VF0.kDx4jre2-3cA”; width=”640″ height=”480″
- Replace the <> with 
- Delete the /iframe tag and its <>
- Get rid of the quote marks and the semicolon (“” and ; )
- Replace iframe src= with googlemaps
- change width and height to w and h; get rid of quote marks around the numbers; and eliminate all spaces from this section (so width=”640″ height=”480″ becomes &w=640&h=480)
Advanced map shaping
- Don’t like the shape of your map? Notice the details of that code:
- (this code comes from the map embedded in this post): iframe src=”https://www.google.com/maps/d/embed?mid=zRA7u_2r6VF0.kDx4jre2-3cA”; width=”640″ height=”480″
- See those “width” and “height” values? Right now it’s a horizontal rectangle, but you can change that! Try some different values to get the shape you want.
The final product!