Interactive US Map on your Squarespace website

Carlos Moreira on January 8, 2018

Squarespace is one of the most popular site builders available, it has definitely become one of the best tools to create attractive websites with a professional look.

Many business owners or even bloggers will need to add an interactive map of the United States of America to their website to showcase locations across the country or information that varies from state to state. The Interactive Maps Generator script that I developed a while back, allows you to generate a US map divided by states using the Google Geochart API.

The steps are simple:

  1. Get the Interactive Maps Generator
  2. Build the US Map following the on-screen instructions
  3. Copy the Embed Code
  4. Place it on an Embed Content block on your SquareSpace website
  5. Save your changes

You can embed the map on your squarespace website easily once you’ve built it. The script costs $16 and you can create as many maps as you want for your website. It includes not only the map for the US, but also for all other countries in the world.

Example Map

US Map Placeholder
US Map

Using the Interactive Maps Generator

Once you have the script (get it here), unzip the file and open the index.html file on your browser. Make sure you unzip the file and not open it directly from inside the zipped file, the script won’t work this way. Once you have the generator working follow the onscreen instructions to create your map. The first step will be to select ‘United States of America – States’ in the ‘Region to display’ option. You should then see the US map below in the preview. Follow the onscreen instructions to build your map. To colour states, use the ISO-3166-2:US codes.

You’ll be able to colour states or add markers to specific locations. If you use markers we advise you to add a Google Maps API Key in the generator. There will be options on how to get one.

Get the Embed Code

Once your map is ready, you’ll just need to copy the content of the ‘Javascript Embed Code’ box to place it on your squarespace site. Make sure you select all the content of the box, so all the necessary code is copied.

Interactive Maps Generator Screen

Paste the Embed Code

In your squarespace website, go to the edit screen of the page where you want to place the map and click the ‘+’ button to add a content block (More information on how to add blocks). Select the ‘Embed’ option.

The embed screen will only show a field to add a URL, but you can click the < / > button to add the code directly. Once you click that button a new screen will display, with a bigger text area where you should place the code you copied from the generator.

Save your changes

Once you save these changes, you should see the map on your page. You now have a US map on your squarespace website! You can get the map generator script on Envato Market. It will work on most modern browsers, no need to install any new software.

WordPress Maps

If you’re looking for a similar but much more flexible solution for WordPress, I strongly advise you to check out Interactive Geo Maps WordPress plugin.

World Map on Divi

Carlos Moreira on November 17, 2017

There are several reasons why you might want to have a world map on your Divi powered website. The builder already includes a great module that allows you to add a map generated by Google Maps to your page. However you might be looking to add something more simple, more stylized, that fits your design.

I have developed a plugin called Interactive World Maps that is 100% compatible with Divi and allows you to add a map to your page using a different technology, also from Google, that generates interactive vector maps. You can colour countries, link them to specific pages, add information that will display on tooltips or on lightboxes and even add markers to specific locations. Here’s an example of how a map can look like:

 

All Countries Placeholder
All Countries

 

Although the plugin doesn’t add a new module to the Divi Builder, it works with shortcodes, so you can add it in any module that accepts text. Here’s how to add the map to your Divi page:

1) Install the Plugin

You can get the plugin for only $21 with 6 months support included and all future updates. Once you have the plugin zip file, you can install it like through the Plugins > Add New > Upload interface in your administration. Once you have the plugin installed you’ll see the new ‘Interactive Maps’ menu entry in your administration menu.

2) Build Your Map

On the plugin’s website, you’ll find some instructions and even a video on how to build your first map. Depending on what you want to achieve, you’ll need to do different things. But basically you should read the instructions on screen so you know what you need to do.

3) Add Shortcode to your Page

Once you save your map, you’ll have access to a shortcode with this format:

show-map id=’X’

You can place this bit of text in any module from the Divi Builder that accepts text. Most likely you’ll end up adding it on the Text Module. Simply copy the shortcode and add it inside the text module, in the text editor. Once you save your page and preview it, you should see your map.

When the responsive mode is enabled for the maps, they will be as big as the container where they are placed. If you place them inside a full width row, then the map should take the full width also, creating a full screen map.

Feel free to ask any questions below on the comments.

If you have already purchased the plugin and you need support, please contact me through the support page on Envato Market.

Get this plugin for only $21 one time fee.

6 months support included and all future updates

Get Plugin

Date picker in Divi Contact Form

Carlos Moreira on September 25, 2017

Divi is one of the most used themes on WordPress and one of the latest updates introduced a ton of new features for the Contact Form module. However a simple yet useful input type missing is a date picker. Might not be used by the masses, but it’s very useful for some cases. For a recent project I needed to build a contact form that would work as a booking request form, so a date picker field would be a valuable addition to the arrival and depart date fields.

I helped to develop a plugin that allows you to do this and also has the extra option of enabling a time picker. The plugin is now maintained by InputWP.

Date Time Picker Field

With this plugin enabled, what you need to do is give a unique Field ID to your field, when editing the field you want to convert to a date picker, in the Contact Form module. For my project I used ‘date-arrival’ and ‘date-departure’.

Then you’ll use those IDs to tell the plugin which fields to convert to date pickers. Go to Settings > Date Time Picker and add the following to the ‘Selectors’ field:

input[data-original_id='date-arrival'],input[data-original_id='date-departure']

Basically you’ll need to add input[data-original_id='your_field_id'] to the selectors field and repeat that if you have more fields. If you copy/paste the code from here, make sure to re-write the ‘quote’ signs, since they might get changed in the copy/paste.

When you save these changes you should have your contact form fields converted into date pickers.

Here are some screenshots of how I implemented the date and time picker in the field.

Not so hard, right? Hopefully Divi will include a date-picker or date-time-picker option for the contact form fields at some point, but until then these workarounds are easy enough to implement.

WordPress Customization Services I can vouch for

Carlos Moreira on September 22, 2017

I’ve been working with WordPress for 10 years now and although it’s a powerful tool that allows you to do almost anything, there’s always some small detail you can’t customize or a feature that you can’t find in a plugin. That’s why WordPress customization services are needed.  I did a lot of customization services and still do once in a while, but I had the chance to work with some developers that are good and reliable that I can recommend. Here’s a list of the top WordPress Customization services I recommend:

1) WPKraken Team

I worked a couple of times with WPKraken, a reliable and trustworthy team of in-house WordPress experts with years of experience that can do everything, from the smallest task to bigger projects. They charge a fair $50 flat hourly fee and have a platform that makes it easy to describe your needs and get a quote. I can vouch for this team and I strongly recommend them. Some of the things they can do for you:

  • WordPress Theme and Plugin Installation
  • CSS/Visual Fixes
  • Security Improvements
  • Website Audit
  • Website Migration
  • Plugin Customizations
  • Theme Customizations
  • Logo Design

2) Envato Studio

Envato Studio is site in the same network of Envato Market, where I exclusively sell my plugins. So it isn’t a surprise that I would also recommend this service. This platform allows hand-picked freelancers to provide their services, that range from design, to development. The platform displays the ratings of the different service providers so you know what other users think of them. Prices start at $50 and these are some of the services you can find:

  • Plugin and Theme Instalations
  • Plugin and Theme Customizations
  • Server Migration
  • WordPress Multisite/Network instalation
  • SEO Services
  • Full WordPress Website Setup