Tourism North Bay Website

How Tourism North Bay Used the Lockdown to Ramp Up

Tourism North Bay Website

While international travel came to a halt, we worked with Tourism North Bay to build a new brand and website so people can plan and share their dream trip to the Gateway of the North right now!

With a new brand, a new website, and a handy planning tool, Tourism North Bay is well positioned to attract and engage local residents and new visitors.

Clark Marketing Communications on Google Maps - How to Make Your Goolge Map Responsive

How to Embed / Add a Responsive Google Map to Your Website

Step 1. Find Your Google Listing

One of the most common mistakes we see on websites is maps embedded only as a street address and not the actual Google My Business (GMB) Listing. If you’re only sharing the street address, you’re missing out on some key elements that could help with SEO.

Go to maps.google.com and search for your Business Name and select it.

TIP: Don’t have a GMB?
Learn how to sign up / verify your Business on Google.

 

Step 2. Grab the Embed Code

Open the hamburger menu ()in the top lefthand corner of the screen, and click “Share or Embed Map” or just click the “Share” button ().

Then go the the “Embed a map” tab.

Copy the HTML for the <iframe> and paste it into an HTML element (text editor on previous versions of WordPress) on your webpage.

 

Step 3. Make it Responsive

By default, Google will set the width to a specific pixel dimension, but to make the map resize on different devices, you just need to make a small change to the embed code.

<iframe src=”https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2755.546950873161!2d-79.47499194827225!3d46.31883438392698!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x4d29007493f8a831%3A0x7ec373b946bbf351!2sClark+Marketing+Communications!5e0!3m2!1sen!2sca!4v1549636300345″ width=”600″ height=”450″ allowfullscreen=””></iframe>

Simply delete the width="600" height="450" attributes from the embed code, and replace it with style="width: 100%; height: 450px" to make it responsive.



… and that’s it!

Congrats! Now your beautiful map will show up a the proper width view on all devices – whether it be a smart phone, a desktop or a tablet.

👋High five for making your website that much better!