Ways to Build with Maps Builder
There are several important tools built into Maps Builder which should be highlighted for your ease of use. Primarily, this is an overview of where to find tools to interact with the Maps Builder as easily as you can.
The Add New or Edit Map Screen
By default, you’ll see a screen that looks a lot like a typical “Add New” page you find in many WordPress plugins. But instead of a content area, you are presented with a Map in the “Google Map Preview” section. This is where you can see all of your map creation happen live.
The first time you go to this screen you’ll be prompted to allow your browser to pull in your geolocation. This is done via the Maps API and that information is not stored or collected by us in any way. Instead, it is stored as a cookie in your browser and used to set the default location for your Maps. Without a default location, the Maps API cannot show you anything. So if you don’t want to use the geolocate tool, head over to your settings to set a default location.
You’ll also notice 4 other Sections on this page which are unique to Maps Builder.
- Map Markers (top center)
- Google Places (bottom center)
- Display Options (top right)
- Map Controls (bottom right)
All of these are explained in detail below.
The Maps Builder Screen
The other way to build your Google Map is with the Map Builder. Because Maps can be very immersive and detailed, we wanted to provide you with the largest and most refined way to build your map. This is of course with the “Map Builder” option. You can set this as your default option in the Settings page.
Both the default screen and the Maps Builder screen have a toolbar at the very bottom which gives you quick access to some important tools. Here’s the overview:
- Add Location — Clicking this opens a modal to search for a location to add
- Drop a Marker — Clicking this allows you to click anywhere on the map to add a new marker and add ma
- Goto Location — Clicking this opens a modal with a location search. When you select your location, it will re-center the map on that location
- Edit Map Title — While in “Map Builder” mode, you can’t see the Map title. You can edit it directly from this button.
- Set Lat/Long — If you drag the map to a new location, that new centering will only be saved if you save it with this button (or the same button under the “Display Options” section).
- Width & Height
- Each Map’s width and height can be set with either pixels or percentage. For example, if you wanted your map to be the full width (and responsive) of your content area you could set it to 100% width, and maybe 350px height.
- Latitude and Longitude
- This shows the current Longitude and Latitude of the center of the map. This will be adjusted automatically if you drag the center of the map to a new location. But in order to save the new center you’ll need to hit the “Update” button, otherwise the new position is not saved.
- Road Map — Shows the map as Road Maps
- Satellite — Shows the map from an aerial view
- Hybrid — Shows roads overlayed on top of the aerial view
- Terrain — Shows a topographical view of the highs and lows of the landscape.
- This sets the default zoom level that the map is loaded upon page load. It ranges from 0 (the whole world) to 21 (as close as possible). This setting is saved when you click “Update Map”.
- The following layers are available to be applied to your map, but only when the “Map Type” is set to either “Road Map” or “Hybrid”.
- Traffic Layer — Shows severity of current traffic by color.
- Transit Layer — Shows public transportation routes available in that area.
- Bicycle Layer — Shows available bicycle lanes in that area.
- This feature is powered by Snazzy Maps. The free version comes with 16 of the most popular Snazzy Map themes. The Pro version comes with the top 83 most popular Snazzy Maps.
- You also have the ability to choose “Custom”, and add any available theme from the Snazzy Maps site
Did you know you have over 80+ Map Themes to choose from in Maps Builder Pro?
The Map Controls defines how your users can interact with your map. These really are a matter of preference, but occasionally they can be very important to prevent annoying behavior. Have you ever scrolled down a page of content only to get stuck zooming into a map instead of down the page? Yeah. We did too, that’s why you’ve got more control here.
- This controls the appearance of the Zoom controls on the upper left of the map.
- Default (Default)
- This determines whether Street View is available to your users or not
- Standard (Default)
- This determines whether the pan controls appear in the top left of the map screen or not.
- Standard (Default)
Map Type Control
- This determines your map will allow your users to choose whether this is a “Road Map” or a “Satellite” map. Satellite maps also have controls for street labels and whether or not the map shows aerial shots at a 45° angle or not.
- None — No Map Type Controls will be shown
- Dropdown Menu — Show controls as a dropdown
- Horizontal Bar (Default) — Show controls as horizontal buttons.
- Controls whether to allow your users to drag the position of the map or not.
- None — The map position will not be able to be dragged at all
- Standard (Default) — The map position will be able to be dragged
Double Click to Zoom
- Determines whether the user can zoom into a specific area of the map by double-clicking (or double tapping) that area
- None — Disables zooming by double-click
- Standard (Default) — Enables zooming by double-click
Mouse Wheel to Zoom
- Determines whether or not the mouse wheel will zoom the map in/out.
- None (Default) — Disables zooming with the mouse wheel
- Standard — Enables zooming with the mouse
A Note on “Zooming”
There are several ways to interact with Google Maps regarding zooming in and out. Per the options above you’ll notice that you can disable “mouse wheel” zooming and the “Zoom controls” as well. But on mobile devices you can also “pinch zoom”. This feature is connected directly to the ability to “drag” your map to a different location.
So if you want to disable all types of zooming including the “pinch” zoom you’ll need to disable “Mouse wheel”, “Double-click”, and the “Draggable map” options.
- Choose whether to show nearby Google Places on your map or not.
- Allow your visitors to search the nearby area for Google Places by providing a search box at the top of the map with different Place Types available for searching
- Defines the area which the most relevant search results will appear by in meters
- You can pre-load Google Places on your map by “type”. There are nearly 100 different Google Places Types to choose from.
Animate in Markers
- Allows markers to drop in consecutively to emphasize their different places with animation
- Clustering allow you to have a lot of markers in relatively close proximity, but when the map is zoomed out you’ll see a marker count rather than a bunch of markers on top of each other. When you click on a cluster you’ll be zoomed in automatically to that area
- As you add new markers throughout your map, all of their location details are stored here in this area. So if you need to, you can open this area and edit the details manually.
- Marker Title
- Marker Description
- Marker Reference
- Marker Place ID
- Hide Place Details
- Marker Latitude
- Marker Longitude
- Marker Infowindow
Want to use Custom Marker icons? Here’s how.
You can add as many different directions routes as you like onto the same map with Maps Build Pro.
You can add as many different direction routes to your map as you like. Directions can be shows in the following formats:
Click the code to select all
This controls how Directions are shown on your maps in the front-end.
- Display in overlay panel — A pull-out drawer is added to your map. When the directions icon is clicked your visitor can scroll through the directions here. Note that the user can also click on any point of the directions and have that marker highlighted live on the map.
- Display below map — This display all the directions in a table directly below the map. Note that the user can also click on any point of the directions and have that marker highlighted live on the map.
How to Add Directions
- Step 1: In the “Direction Groups” section, open “Directions: 1”
- Step 2: Choose your “Travel Mode”
- Step 3: Enter a destination in the first field. You’ll see the location being auto-populated as you type. Choose your destination when it appears in the list, or if your destination is not found you can still add it based on the address or description you enter in this field.
- Step 4: Click the “Add Destination” button
- Step 5: Enter your new destination just like you did in Step 3.
- Step 6: Once all your destinations are added, click “Update Map” to save these directions
You can then add additional “Direction Groups” by clicking the “Add Directions” button found at the very bottom of the “Directions” section.
One scenario where you might want additional “Direction Groups” is perhaps you want to provide Driving and bicycling directions for the same route. Or perhaps you have a conference happening over the span of two days. One route shows directions from the Conference venue to an “after party”, then other route shows directions from the Venue to a local restaurant for the second day of the conference.
Mashups are a powerful way to add location information connected to posts or pages on your WordPress site to any map dynamically.