Maps Marker, Maps Marker, make me a map

(This tutorial draws from the Maps Marker tutorial of CCNY ITFs, Logan and John.)
Skip down to: Layers, Markers, Seeing Your Map, Your Last Memorable Slice, Examples.

Maps Marker is a WordPress plugin that allows you to create a map with marked points of interest. You’ll see a menu item called Maps Marker on the left-hand side of the Dashboard. If you hover over or click this item, you’ll see the full submenu for Maps Marker.

To make a map of the neighborhood you’re exploring, you’ll use the two map-making functions—layers and markers—of Maps Marker together. The following tutorial will lay out the basic steps of making a map, which we’ll also cover together in the active classroom demonstration.

Layers: Delineating the Territory of Your Neighborhood.

  1. Add New. To start, you’ll need to create a layer for your chosen neighborhood. Click “Add new layer” in the submenu.
  2. Name It & Find It. Give your layer the name of your neighborhood. Then, search for the neighborhood in the location search bar (or by zooming in on the NYC area default layer map). As you’ll see, this search area is powered by the all-knowing Google, which, effectively means that you don’t need to be super-precise for the program to find your neighborhood on the map. Searching by the neighborhood’s name should get you there, or nearly.
  3. Find Your View. You’ll then want to zoom in and drag the map around to find a map view that shows most of your neighborhood.  Try out zoom level 15 (specified to the left of the map). This view will be the overall view of your neighborhood that you populate with points of interest.
  4. Publish It. When you’re satisfied with your layer, click the green publish button at the top of this editor area. If you click “List all layers” in the Maps Marker submenu, you’ll now see your layer listed along with the rest.

Markers: Identifying Important Points of Interest in Your Neighborhood.

  1. Add New. Okay, now you need to populate your map with points of interest! This is where the markers function comes in. Click “Add new marker” in the submenu to get started.
  2. Name It. You’re now in the markers editing area, which has a similar feel to the layers area, but there’s a lot more here to be done! Start off, as you did with your layer, by giving your marker a meaningful name.
  3. Find It. Search for the location of your marker by address or other means (cf. step #2 in layers). If you use the search box, Maps Marker will suggest a location for your marker. You can move this marker simply by clicking inside the map area. You may want to change to zoom level 15 or closer to make sure you’ve got your marker in the right place.
  4. Assign Layer. Next, look to the left of the map where you’ll find, right under the zoom mechanism, a drop-down menu where you can specify your layer. Click this drop-down and select the layer you created above.
  5. Choose an Icon. Now it’s time to scroll down the page and see all the fun you can with your marker. Right under the map, you’ll see the standard blue marker that’s being used to mark out your location in the map above. Click it, and a whole host of other icons will become available. What icon you choose may depend on how you decide to structure your map.
  6. Add Text, Etc. The next area is a text editor similar to the one you use when publishing posts. Like in the post editor, you can add a wide variety of content and media here.
    a.    First, repeat the marker name in bold at the top.
    b.    Add any descriptive or informational text about this point of interest.
    c.    You can also add images, media, links, etc. here.
  7. Publish It. Click publish on the bottom of this editing screen to add your marker to the layer.
  8. Rinse, Repeat, Check. Repeat the above steps to add additional markers. If you view your layer (through the “List all layers” submenu), you’ll see any markers assigned to that layer in the editing area for your layer. You can also check that your marker is correctly assigned to a layer by going to the “List all markers” submenu, finding your marker, and checking the layer column.

Making Your Map Visible!
Once you’ve made a few markers, you may want to see how your whole map looks. To do this, you will need to add a shortcode for the map to a post or page. A shortcode is a short, square-bracketed line of text that will easily call up the code for the map (rather than you having to copy and paste a bunch of PHP or other code, which just ain’t easy or allowed). There are two ways to do this:

  1. Go to the “List all layers” submenu. Find your layer in the list and find the shortcode for your layer in the last column. It will look like this: [mapsmarker layer="SOME NUMBER"]. Copy that shortcode, bracket to bracket, and paste it into a post.
  2. Alternately, once you’re in the post editor for a particular post, you’ll notice that there is an “Add Map” button next to “Add Media” near the top of the post editor. When you click that, you’ll see a list of layers and markers you can add to your post. Find and click yours, and, voilà, your shortcode appears. This option may become a little unwieldy as everyone starts to add layers and markers.


Your Last Memorable Slice
In Practice. Let’s practice our map-making skills by creating markers for pizza places we adore and assigning them to the layer named “Your Last Memorable Slice.” Then, we’ll refresh and see our crowd-sourced map of triangular-in-spirit-if-not-in-fact delicacies, so we’ll know where to be on the lookout for fork-and-knife-wielding Mayor De Blasio!

KML-LogoFullscreen-LogoQR-code-logoGeoJSON-LogoGeoRSS-LogoWikitude-Logo
Your Last Memorable Slice

loading map - please wait...

Barboncino: 40.672090, -73.957387
Newburgh: 41.527054, -74.034204
2 Bros : 40.689451, -73.980972
2 Bros: 40.689451, -73.980972
L&B : 40.594705, -73.981412
Gino\'s Pizza: 40.681036, -73.975514
Lil Vincents: 40.870937, -73.426386
Lombardi\'s Pizzeria: 40.721583, -73.995625
John\'s Pizzeria: 40.734860, -73.881973
Mr. Pizza\'s Pasta House: 40.591106, -74.164318
Costco Food Court: 40.655481, -74.009074
Difara\'s : 40.625033, -73.961558
marker icon
icon-car.png Fullscreen-Logo KML-Logo

Barboncino

This pizzeria opened in 2011 along Franklin Ave. and is yet another marker of the changing face of Crown Heights. A 2012 article in the New York Times about gentrification in the neighborhood used the fact of this restaurant's existence as its hook.

That said, the pizza is good. And that's an understatement.
marker icon
icon-car.png Fullscreen-Logo KML-Logo

Best cheese crust ever!!!
marker icon
icon-car.png Fullscreen-Logo KML-Logo

2 Bros = BEST PIZZA

 
marker icon
icon-car.png Fullscreen-Logo KML-Logo

2 Bros

THE BEST PIZZA IN THE WORLD TURN UP TURN UP
marker icon
icon-car.png Fullscreen-Logo KML-Logo

L&B Spumoni Gardens is probably the best pizzeria you'll find!
marker icon
icon-car.png Fullscreen-Logo KML-Logo

Gino's!!
marker icon
icon-car.png Fullscreen-Logo KML-Logo

huntington represent
marker icon
icon-car.png Fullscreen-Logo KML-Logo

Lombardi's Pizzeria.



First Pizzeria in NYC! 🙂
marker icon
icon-car.png Fullscreen-Logo KML-Logo

John's Pizzeria

Classic family owned store that has existed for more than 10 yrs.
marker icon
icon-car.png Fullscreen-Logo KML-Logo

Mr. Pizza's Pasta House

Best Staten Island Pizza
marker icon
icon-car.png Fullscreen-Logo KML-Logo

Serves bargain pizzas, $10 for any pie
marker icon
icon-car.png Fullscreen-Logo KML-Logo

A bit pricey, but order a pie with at least four friends and I guarantee you it will be the best couple slices you've ever eaten. Also get the square pie.


Examples
To see some full examples of neighborhood maps that use Maps Marker, check out these two examples:
Chinatown
East Harlem