E-Commerce, Web Design, Custom Solutions.

Map Locations Docs

Map Locations Docs

Code: gmap_docs

Last Update: 12/27/2011

Map Locations Overview

What is Map Locations?

Map Locations is a full featured dealer & store locator, add on module for Miva Merchant 5TM web stores. It provides your customers with a searchable address list and maps to your dealer or store locations, repair centers or any addresses you want to publish.

See it in action here.

Import, export and maintain your address list in the Admin. The intuitive interface is patterned after Merchants admin, so you can start using it right away.

Installation:

  1. After you have downloaded and unpacked the zip file to your hard drive, login to the Miva Merchant admin.
  2. Under Global Settings, click on the "Modules [Add]" link in the left navigation.
  3. The "Add Module" screen will be displayed. Click the [Upload] button.
  4. The "Upload File" window will be displayed. Click on the [Browse] button and locate and the module's .mvc file on your hard drive and click [Open], then click on the [Upload] button.
  5. The file will be uploaded, and the file name and path displayed in the "Module" field of the main admin frame. Click the [Add] button.
  6. Click on the "Utilities" link in the left navigation.
  7. On the Utility Modules screen, check the box next to the modules name and click the [Update] button.
  8. A new tab will appear. Click the tab and enter your license key checkbox, then click [Update].

Upgrading:

  1. After you have downloaded and unpacked the zip file to your hard drive, login to the Miva Merchant admin.
  2. Under "Global Settings", click on the "Modules" link in the left navigation.
  3. On the Modules screen, search for Toolbelt. On the right site click the [Edit] button.
  4. The "Edit Module" screen will be displayed. Click the "Files" tab then Click the [Upload] button.
  5. The "Upload File" window will be displayed. Click on the "Overwrite" checkbox then [Browse] button and locate and the module's .mvc file on your hard drive and click [Open], then click on the [Upload] button.
  6. The file will be uploaded, and the file name and path displayed in the "Module" field.
  7. Click the [Update] button and you're finished.

Getting Started:

During installation Map locations will:

  • Create the locations database and add 2 locations: Miva Merchant and your website address as configured in the admin. These can be edited or delete later if desired.
  • Create a new page template called map_locations (Map Locations)
  • Create a new page item called gmap (Map Locations) and assign it to the page.
  • Create a folder on your website. (Usually /mm5/gmap/) and add several files.
    In this folder you will find map.css that contains the styles for the map_locations page.

Add / Edit / Remove Locations:

To create a new map record, click Add. To edit an existing record, find the location in the list, and click the associated Edit button. To Remove an record, click the checkbox in for the records and click Update.

Product Sorting:

You can sort locations by assigning numerical values to each record. To sort locations, click the Show Order link and edit the numeric order. After setting the order, click the Update button.

Location Code:

When adding or editing a Map Location most fields will be self evident.

The Location Code field is a unique code you can assign to each record. If you create a link and pass the location code in the link href, Map Locations will search for and display that particular map. Adding this link to a product page can link to a map of for a specific dealer or repair center.

Add a link to a particular map.

<a href=
    "http://www.mysite.com/mm5/merchant.mvc?Screen=map_locations&location_code=mivamerchant">
    Miva Merchant
</a>

Location Images:

You can upload two image files. The first (title) will replace the location name text on the list with the graphic image. The second will appear right justified next to the location name and is suitable for locations or icons.

Geocoding Locations:

Each time you edit or import locations the address is geocoded by Google, and the latitude and longitude for the address is saved. If an error occurs, the resulting error message is will be displayed, so you can try to fix the problem. Using Google Maps directly to locate the address can often resolve any errors of let you know why it can't be located.

If you have the locations already they can be included in your import file.

Import / Export:

Import your existing dealer or store locations using the file included with the module called locations_import_sample.csv. Do NOT use commas in your field text since the import file uses this as field seperators.

Export and download your locations by clicking the Export button then clicking the link that displays.

Page Template Editing:

Browse to the page so you can see how it looks. The link will likely be something like this.

http://www.yoursite.com/mm5/merchant.mvc?Screen=map_locations&Store_Code=yourcode

If you are using shorter links for SEO you can adjust the URL as needed. Create a link to this page on your site as desired.

Every website is different and it's likely the page does not display perfectly. In the Admin go to Pages, find map_locations. Here you can make adjustments as needed. The map_locations template we created is based on the PR8 CSSUI framework.

Alternate Templates included:

Included in the modules zip file are two alternate page templates. One of these will likely work in your store.

  • If using the older (mmui) table based framework use map_locations_mmui.mvt.
  • If using the first css framework (mmui_css) use map_locations_mmui_css.mvt.
  • If using the new css framework (cssui) use map_locations_cssui.mvt. (default)

Manual Installation

If your site is using a custom layout you will likely find it simpler to create the template manually.

If you have never edited a Store Morph Page Template before you should review the Miva Merchant 5 documentation and browse to UI/Store Design/Store Morph Technology. If that looks like too much reading, let's just jump in.

Using a sample of your custom layout make these changes

1. After the <head> tag replace the <title> tag with this.

<title>Map Locations: &mvt:store:name;</title>

2. Find the head and body tags. Replace this...

</head>
<mvt:item name="body">

with this.

<mvt:item name="gmap" param="head"/>

<script type="text/javascript">
var map = {};
var iconOptions = {};
iconOptions.addStar = false;
iconOptions.label = "1";

/* Note: .icon { background-color: #A9C9FE; } in map.css */
iconOptions.primaryColor = "#A9C9FE";

var name = "&mvt:maps[1]:name;";
var address = "&mvt:maps[1]:address1; &mvt:maps[1]:address2;";
var address1 = "&mvt:maps[1]:city;, &mvt:maps[1]:state; &mvt:maps[1]:postal_code; ";
var phone = "&mvt:maps[1]:phone1;";
var lat = "&mvt:maps[1]:latitude;";
var lng = "&mvt:maps[1]:longitude;";
</script>
</head>

<body class="MAP" onload="load()" onunload="GUnload()">

At the end of the template find the closing body tag item

</mvt:item>
</html>

and replace it with this.

</body>
</html>

3. Finally find the content section of the page between the page header and footer and add the item
<mvt:item name="gmap" param="content"/>. This item outputs the template found on the Map Locations tab.

<mvt:item name="hdft" param="header" />

<mvt:item name="gmap" param="content"/>

<mvt:item name="hdft" param="footer" />

 

Map Locations Template Editing:

Click the Map Locations tab if you wish to to make structural changes to the page layout. In the page you will find this set of tags.

<div id="map"></div>

It must be included. This is the pace where to Googletm Map will render. all the stylesheet information is included in gmap/map.css

Available Data Entities
Variable Name Entity Value
l.settings:map:active &mvt:map:active; 1
l.settings:map:address1 &mvt:map:address1; 5060 Shoreham Place
l.settings:map:address2 &mvt:map:address2; Suite 130
l.settings:map:city &mvt:map:city; San Diego
l.settings:map:comments &mvt:map:comments; default
l.settings:map:count &mvt:map:count; 1
l.settings:map:country &mvt:map:country; US
l.settings:map:disp_order &mvt:map:disp_order; 1
l.settings:map:email &mvt:map:email; sales@mivamerchant.com
l.settings:map:id &mvt:map:id; 1
l.settings:map:hours &mvt:map:hours; Support 24 hrs 7 days
l.settings:map:image1 &mvt:map:image1; graphics/en-US/admin/mm_logo.gif
l.settings:map:image2 &mvt:map:image2;  
l.settings:map:latitude &mvt:map:latitude; 32.851932
l.settings:map:longitude &mvt:map:longitude; -117.185397
l.settings:map:name &mvt:map:name; Miva Merchant
l.settings:map:phone1 &mvt:map:phone1; 1.800.608.MIVA
l.settings:map:phone2 &mvt:map:phone2; 1.858.490.2570
l.settings:map:postal_code &mvt:map:postal_code; 92122
l.settings:map:state &mvt:map:state; California
l.settings:map:web_page &mvt:map:web_page; mivamerchant
l.settings:map:web_site &mvt:map:web_site; http://www.mivamerchant.com
l.settings:maps_key &mvt:maps_key; notsupplied-wizard

Tips and Tricks:

Link to a particular map:

Use the location code to link to a particular map.

<a href=
    "http://www.mysite.com/mm5/merchant.mvc?Screen=map_locations&location_code=mivamerchant">
    Miva Merchant
</a>

Link the map to another page:
You can use the location code for other purposes. If the code happens to be a page, category, or product code you can create a link to the page using the code.

Display the Email address:
By default the email address (&mvt:map:email;) is commented out in the Map Locations template. You can remove the comments to display the map.

Change the balloon color:
The clickable balloons next to each location is a semi-transparent png file, wrapped in a <div class="icon"> Edit the map.css file for the .icon to change the background color. The default is a light blue ( #A9C9FE )

background: url("bg_balloon.png") no-repeat scroll 0 0 #A9C9FE;

To change the color of the balloon on the map, edit the map locations template javascript. Find the following inside the <head> section and change the color.

iconOptions.primaryColor = "#A9C9FE";