MapPress Documentation

Installation

MapPress installation works just like any other plugin:

  1. Download the .zip file
  2. Unzip the file to your wp-content/plugins directory.  You should now have a directory like  wp-content/plugins/mappress-google-maps-for-wordpress
  3. Go to the WordPress ‘plugins’ menu and activate the MapPress plugin
  4. After you activate you should see a message from MapPress that you need to provide your Google API key. 

Note: Be sure to install to  wp-content/plugins/mappress-google-maps-for-wordpress  or the maps won’t display.

Using MapPress

This section describes how to use MapPress.  Note: you can click on some of the images to see a bigger version.

Entering your API Key

When you first activate the MapPress plugin you’ll see a message that you need to enter your Google Maps API key.  If you don’t have an API key you can get one here.  To enter your key, go to the MapPress options menu, it’s under the standard ‘Settings’ menu:

image

Options Screen

The options screen lets you set map defaults.  If you change a default setting, all of the maps on your blog will change unless you’ve made specific settings for each map (see ‘Inserting a Map into a Post’) below.

image

  • API key – enter your Google Maps API key here.  Note that the field can be scrolled left and right so don’t panic if it’s not wide enough to show your entire key
  • Address format – if you choose "exactly as entered" the addresses you show on your map will display exactly as entered.  For example "1 infinite loop, cupertino".  Choose "corrected address" to let Google determine a corrected version, for example "1 Infinite Loop, Cupertino, CA, 95014, USA".
  • Country code for searches – the default is ‘US’.  For example, if you enter ‘Toledo’ Google will normally display Toledo, Ohio.  If you set the country code to ‘ES’ (for Spain), then Google will show Toledo, Spain.  This is just a hint and you may not always get the country you were expecting. 
  • Force map language – leave this blank for Google’s default behavior, which is to show all texts (e.g. map controls, directions, etc.) in the default language of the user’s browser.  If you wish to force a particular language enter the 2-character code (a list of languages is available here).  Note that you will also need a translated version of MapPress.  The language files are in the ‘languages’ directory. 
  • Directions – check to include directions links in the map markers. 
  • Big map controls – check if you want to add large controls for panning and zooming.  If you don’t check this box, the map will display smaller controls.
  • Map types button – check if you want to provide a button that lets your readers change the map type for each map in your blog. 
  • Initial map type – by default MapPress will show street maps, but if you prefer to show a different type such as topographic maps, you can select it here.   You can also override the type for each map individually.
  • Initial marker – check to open the first marker automatically when the map is displayed (this is normally only useful when there is only one marker on the map)
  • Googlebar – check to enable the googlebar search bar in the map
  • MapPress link – check to enable the mappress link (please leave it enabled!)
  • Scrollwheel zoom – check to allow your readers to zoom maps in and out using the scroll wheel.  Note that this can be annoying when they are trying to scroll a web page instead, so by default it’s disabled.

Adding Maps to Your Posts

After you activate MapPress and set the options you will notice a new MapPress ‘meta box’ in the post edit screen (where you normally edit your posts and pages).   You can move the meta box up and down – you may find it convenient to position it right below the post text.

image

  • Map size – choose one of the default sizes or select ‘custom’ to set your own size
  • Insert map shortcode in post – click to insert the map shortcode in the post text. 
  • Add location – type an address or other location, or a latitude/longitude.  Then click the ‘add location’ button to add a map marker.
  • Latitude/Longitude – use this to place a marker at an exact latitude/longitude.
  • Automatically center/zoom map – check to have the map automatically centered and zoomed when you save it (see below).
  • Center/zoom now – click to automatically center/zoom to show all markers.Currently mapped – this section lists all of the locations shown on your map.  Click on a location to edit it (see below).

    Inserting a Map into a Post

    Entering a map in a post is easy:

    1. Select a map size
    2. Decide where you want the map to appear in your post, then put your cursor there and click the Insert map shortcode in post button.
    3. Add one or markers (see below). 
    4. Publish your post.  That’s it!   You should now have a working map in your blog.

    Adding Markers

    Add map markers as follows.  Note that MapPress won’t display a map without at least one marker:

    1. Use the "street address" field or the "latitude/longitude" field to enter a location
    2. Click the add location button
    3. Click the Center/zoom now button to see how the map will look in your blog

    Notes:

    • If you use the "street address" field you may enter an address ("1 Infinite Loop, Cupertino, CA"), city ("New York"), state ("California") or place ("Washington’s Birthplace"). 
    • If you use the "latitude/longitude" field you may enter something like 40.79 and -73.96 to see central park
    • You may also enter a latitude/longitude in the "street address" field as a string, like this: "40.79, -73.96".  However, if you enter it this way MapPress will automatically ’snap’ the marker to the nearest valid street address (in our example, it’ll find "97th Street Transverse Rd".

    Adding Markers by Latitude/Longitude

    Note that you can also enter a latitude/longitude, such as "-34, –33", but by default MapPress will ’snap’ the marker to the nearest valid street address.  If you want to precisely position the marker you can use the "’latitude/longitude" fields instead.

    Setting the Map Type, Center and Zoom

    By default the ‘automatically center/zoom map‘  checkbox is set.  This means that MapPress will set the map zoom so that all markers are visible and then center between them.

    If you prefer to set the center and zoom manually, uncheck this box.  You can then drag and zoom the map during post editing.  When you publish the post, the map will display exactly as you saved it.

    Editing Markers

    Once you have placed a marker on the map, there are several things you can do:

    Drag a marker

    1. Click on the marker and drag it to a new location. 

    Delete a marker

    1. Select the marker by clicking on it, or by clicking on the location in the ‘currently mapped’ list below the map. 
    2. Choose ‘delete’.

    Edit a marker

    1. Select the marker by clicking on it, or by clicking on the location in the ‘currently mapped’ list below the map. 
    2. Choose edit’.
    3. You can now enter any valid HTML for the marker title and body. 

    Tips for Adding Marker HTML

    • You must enter raw HTML code for the markers, so please check your syntax carefully – look for a visual editor in the next version of MapPress…!
    • Try to keep the marker title as plain as possible because future versions of MapPress will list the marker titles.  If you add graphics here, they probably won’t look good in the list.
    • When adding images: bear in mind that if you enter a width or height as a %, Google will treat this is a % of the entire map width,  not a % of the infowindow (balloon) width.  You’ll probably want to just specify pixels instead.
    • You may also want to use a style attribute to float images left of your other text.  Here’s an example from the "Pamplemousse" link on the map at wphostreviews.com.

    Example Marker Title:
    <a href="http://www.pamplemoussecakes.com" target="_blank">Pamplemousse Patisserie</a>

    Example Marker Body:
    <img width="100" height="100" style="float:left" src="http://wphostreviews.com/wordpress/wp-content/uploads/2009/07/pamplemousse-150x150.jpg" />
    2401 Broadway Street<br/>
    Redwood City, CA 94063<br/>
    (650) 599-9714<br/>
    <a href="http://www.pamplemoussecakes.com" target="_blank">www.pamplemoussecakes.com</a>

    Changing the Map CSS

    The MapPress plugin comes with a CSS file mappress.css.  Some features of the map can be changed.

    The mapp-div class defines a <div> that contains the entire map.  It can be set to align the maps center, left or right, and so on.

    The map marker balloons contain several nested <divs> that you can use to control their appearance:
    <mapp-overlay-div>
    <mapp-overlay-title>
    <mapp-overlay-body>
    <mapp-overlay-directions>