Stacks Image 6

Map 2

A map stack with it’s own sense of direction.

Map 2

Google maps made easy for you and your visitor.

Overview.

Create fully responsive maps with between one and unlimited map locations and pixel perfect vector based map marker pins. Offer your users driving directions to any of your locations.

Location Aware: Map 2 can find your users precise current location and guide them directly to your door.

Built in Route Finder: Your user can get directions to a location, displayed on screen, printed out, emailed to them selves, or opened in Google maps.

Vector Markers: Map markers are vector based SVG’s, so always display perfectly at any screen size or resolution.

Key features.

  • Add from one to unlimited marker pins.
  • Automatically finds your visitors precise location.
  • Map marker pins can be any colour you choose and each can be a different colour if you wish. (Snazzy Maps Site)
  • Allows you to add custom SVG map marker pins.
  • Option to offer driving directions to any of your locations.
  • Visitors can print, or email driving directions to one of your locations.
  • Driving routes can be opened in Google maps.
  • Allows you to easily add Snazzy Map codes to create a map in the colours of your choice.
  • Each map marker pin can have plain text or HTML added to a pop-up that appears when the pin is clicked.
  • Option to make height be automatically responsive (shortening the height as the screen width gets smaller).
  • Map dragging is automatically disabled on small touch screen devices (enabling users to scroll past the map without getting stuck in the map).
  • All available map controls are optional.
  • All text seen in the map UI can be configured in the language of your choice.
  • Each map location can be specified by the postal address (default) or by latitude and longitude.
  • Edit mode interface designed for ease of use, and specifically designed for Stacks version 3 or above.

Snazzy Maps: You can use any of the thousands of free map colour themes available at snazzymaps.com Snazzy code entry box available in the stacks settings.

Image

Important : As of 8th October 2016, the directions button will be hidden on pages that are non secure. Eg: a page using http as opposed to https. All browsers have now committed to blocking Google geolocation services on non secure pages. Secure pages are unaffected.

Instant download.

Version : 1.1.3

Responsive : Yes

First released : 12/10/2015

Last Updated : 20/03/2018

Stacks V 3.0 or greater.

Live demo.

Please note that Google can not calculate driving directions over major bodies of water like an ocean.

Please choose a location on a map that it is possible to drive to from your location in order to test the get directions feature of Map 2.

Choose a location
London Office
London, UK
Sydney Office
Sydney Australia
New York Office
New York USA
Berlin Office
Berlin Germany
Tokyo Office
Tokyo Japan

With a Snazzy Map theme applied

You can add any one of the thousands of snazzy map themes to display your map in the colours of your choice. Snazzy maps also allows you to create your own theme if you wish. Simply copy the Snazzy Map code and paste it into the box provided in Map 2 stacks settings.

Choose a location
Head Office
Brighton Road, St Helier, Jersey, Channel Islands

A default map as dragged into the page.

Setting up a map in Map 2 is so simple. Just drag a stack into the page and add your postal address (lat long option available).
Adding more locations is a simple click of a “+” button.

Image

NEW FAQ: regarding setup. Please read. Google changed it's policy on embedded maps in external websites. Following our guide in the FAQ section below, it's quite painless, but it should be noted, if you want to display any Google map in your website since Google made these changes, it is a step you must complete. This applies to any map.

Style it up.

Thousands of map styles available that can be plugged directly into the stacks settings at snazzymaps.com.

Stacks Image 722

Stacks settings.

In this section we have provided a comprehensive list of available settings, and a full description of what each of the settings does for the stack.

Stacks Image 243
Your API key

Since 22nd June 21016, Google maps no longer allow keyless access. You are required to create and supply an API key with your map. The stack gives you an input field in the settings to place the API key you are about to create. Please read the FAQ below to get an API key for your map from Google's website.

Map type

Your choices here are roadmap or satellite. Visually they are quite different. Roadmap is like we all know from a familiar paper type map, while satellite is a photographic image of the location taken from a satellite. Note Snazzy map code is intended for a roadmap type.

Map width

You can choose to allow the map to fill 100% of the container in which you drop it, or restrain the width to a maximum size. If you restrain the width you are given a further option to align the map to the left, right, or centre of the container in which you have dropped the Map 2 stack inside.

Map height

Sets the height of the map in Pixels.

Responsive height

When selected, the maps height will be reduced by 1/3 on devices with a screen width below 1024px, and reduced by 1/2 on screen widths below 480px.

Map units

Choose between Miles or Kilometres. This is the unit of measure that your user will see littered through the driving directions to your location.

Zoom level

This only comes into play for maps with a single map marker pin added. If so you can choose to zoom in or out further than the default zoom level of 15 when the page first loads. Level 15 typically shows a level of detail to show local street names. When multiple marker pins are added, the map will automatically zoom to fit all the pins within the map view at page load time.

Show zoom control

Show or hide the zoom control on the map.

Draggable map viewport

When selected the map can be dragged by the user to show more hidden content to the top, bottom, left or right of what is currently displayed in the maps viewport.

Show get direction button

Show or hide the get directions button on the map.

Show icon on directions button

Show or hide the icon on the get directions button.

Directions button (colour pickers)

Here you can choose the colour of both the background and the text of the get directions button.

Display text

Anywhere in the stack that text appears that could be changed to a different language, there is a setting for you to amend that text. The text is profiled by default in English.

Snazzy code

Snazzy maps is a website that provides blocks of code you can copy to make your map display in colours of your choice. There are thousand of map colour themes on the site, and you simply select the theme you like, and copy the provided code, to paste into this box. The stack automatically detects you have added code and converts the map to use the theme you have added. Check out Snazzy maps here : https://snazzymaps.com

Note: There is a button at snazzy maps to "copy code", on each of the map styles pages. This button only appears if you visit their website in a browser that has flash enabled. I have to switch to Chrome browser when I want to get code, as my Safari has flash disabled.

Edit mode contents

Here you can simply collapse or reveal the entire contents of the stack in edit mode only. Just to keep things tidy, when you are done editing the stack.

Stacks Image 833
Pin colour

Choose the colour of the background and border of your map marker pin here.

Pin outline

Set the size of the border / outline of the marker pin here. Size options are thin, medium, thick, or none.

Edit marker pin SVG path

The stack displays the marker pins as SVG vectors not images. This allows them to be as crisp as possible at any screen resolution. When selected a further input field appears where you can add your own SVG icon path. This allows you to add your logo as a marker pin for example. I have made a brief video to show you how to create an appropriately sized and positioned SVG file to extract these points from.
The video was recorded using Sketch app, but any application capable of producing an SVG file will do the job. See the video in the FAQ section.

Use lat long cords

When selected you will be given another entry field to add a latitude longitude co-ordinate for this location. If you do the location on the map will be based on these co-ordinates, and the postal address is then only used for display purposes. This is handy if for example, you have an office in the middle of the Sahara desert (where Goole knows no valid postal address).

Stacks edit mode.

We pay great attention to how we approach the editing interface of every stack, to ensure intuitive ease of use.

Stacks Image 297

Add as many map location marker pins as you need, simply by clicking the green plus icon. You can drag the locations up and down to re-arrange them at any time.

Image

Quick Fact : If you add more than 11 pins to the map, you need to use lat long co-ordinates for any pin over the 11th, instead of a postal address. Google only allows 11 concurrent calls to the geolocation api at any one time. You can convert a postal address to a lat long cord here : http://www.latlong.net

Stacks FAQ.

Important information that is pertinent to this stack. Please read, as there may well be something here that is essential to the deployment of this stack.

Browser support

This stack is supported in all modern browsers. Any exception to this rule will be listed below.

Safari

Chrome

Firefox

Explorer

How to get an API key for your map

Since 22nd June 21016, Google maps no longer allow keyless access. You are required to create and supply an API key with your map. The stack gives you an input field in the settings to place the API key you are about to create.

Step 1 :

Make sure you are logged into your Google account, or create a Google account if you do nat already have one.
Once logged in go to this url to get started : https://developers.google.com/maps/documentation/javascript/get-api-key

You should see a screen like below.
You need to scroll down just a touch to find this button (see image).

Stacks Image 933

Step 2 :

In this next screen that appears, just allow Google to create a new project for you and click continue. It will create a new project with the default name of My Project.

Stacks Image 940

Step 3 :

In the next screen you need to do a number of things.

  • First Name your key. Again I'd suggest using a name that references the website you are creating the key for.
  • Next add the referrers.

What are referrers? :
If you were to leave this blank, it would work perfectly. But, and there's a big but….. Your key can be seen in your webpage source code, and anyone could potentially come along and copy your key, and use it in their own website if it is not tied to a referrer.
Why is that a problem? :
Well, your key has a limit of 25,000 hits per day on the page containing your map, before Google will ask you to start paying. If you have not signed up to pay for extra hits, then when 25,000 is reached in a single day, then the map will not be displayed for the rest of that day. So if someone else were also using your key on various websites that number could be hit quite quickly.

The first entry is :
Localhost
This allows RW7 to display the map in both Preview within RW7 and the newer Preview in browser feature.

The second and third are your base domain accessible with and without "www."
*.yourdomainname.com
*yourdomainname.com
This allows the map to display at the root of your domain.
The Asterix is a wild card symbol that basically stands for "anything", so in this case it will allow access to the site from http, https, with or without using www as well.

The fourth and fifth are almost the same as the second and third
*.yourdomainname.com/*
*yourdomainname.com/*
These allows the same as the second and third, but with the extra forward slash and wildcard Asterix symbol, will be true for any url deeper within your domain.

You can of course fine tune these entries to your needs if you see fit.

Stacks Image 949

Step 4 :

Now you are presented with your key. Copy the key by highlighting it, and pressing cmd + c on your keyboard. Now hit OK.

Stacks Image 956

Step 5 :

Now hop back into Rapidweaver and select Map 2 stack in the edit mode view to see the stacks settings.
Paste your maps API key into the "Your API Key" setting with cmd + v on the keyboard.

NOTE: If you have multiple instances of the Map 2 stack in a page, you only really need to add the API key to one of them. It will not matter if you add the key to them all, but just adding the key to one of the map stacks will suffice.

Stacks Image 963
Creating a custom map marker pin icon

The video below shows the creation of a custom map pin marker icon in Sketch app. Any image editing application capable of producing an SVG file can do this, and the principles are the same. The main thing to remember when creating your icon is that the size of your canvas is not really relevant, and only added to aid you while designing the icon to get the icon at roughly the right size. The icon need not be on the canvas it’s self when designing, and remember that the top left hand point of your canvas is the point of the location on the map. Position the icon in relation to this point on the canvas when designing.

Fit my Video
Known compatibility issues

All browsers have now stopped allowing a page that is non secure (not https) from accessing a visitors location, with or without permission from the visitor. They will not be changing their policy on this, and there is no workaround. So what the stack now does, is check wether or not your page is http or https. If it is http, the directions button will be hidden, as it will be of no use to your visitor.

Stack installation

Download.

After purchase, you will be sent an email containing a download link for the stack.
Download the zip file from the link, and unzip it to reveal the stack inside.
You should now see the stack as a logo style icon.

Normal installation.

Double click the un-zipped stack file (the one that looks like a piece of lego).
This will launch Rapidweaver if it was not already running, to automatically install the stack.
Rapidweaver handles the install process from here. Guiding you through a couple of simple clicks to complete the installation.
Re-start Rapidweaver to ensure the installation is complete.
You will now see the new stack in the Stacks plugin library.

Installation where more than one version of Rapidweaver is installed.

Sometimes if there is more than one version of Rapidweaver installed on your system, the double click method launches the wrong version of Rapidweaver to install the stack. To ensure the it is installed into the version you want to install to, you can, instead of double clicking the stack, just drag and drop it onto the appropriate Rapidweaver app icon in your dock at the bottom of your screen.

This will launch Rapidweaver if it was not already running, to automatically install the stack.
Rapidweaver handles the install process from here. Guiding you through a couple of simple clicks to complete the installation.
Re-start Rapidweaver to ensure the installation is complete.
You will now see the new stack in the Stacks plugin library.

Secure checkout.

We trust PayPal as our secure checkout provider.

Don't have a PayPal account? No worries. PayPal allows you to pay with your credit card if you do not have an account set-up.

Instant download.

Stacks Image 589
Choose a location
Doobox Head Office
Brighton Road, St Helier, Jersey, Channel Islands

© 2018 Doobox Software. Building premium Software Mac & RapidWeaver™