How To Create a Custom Google Map For Your Business

  • follow us in feedly
Published November 11, 2013 by Brad Knutson
Custom Google Maps

When designing a new site, it’s not uncommon to place a map of a businesses physical location. The problem is that the maps that Google provides with it’s embed feature often clash with the theme you’ve worked so hard to create. So how do we remedy this?

Thankfully, Google provides a fairly easy to use customization script to add markers, and change the theme of the map itself.

So let’s dive in!

TL;DR – The Demo

Here is the script that I created to come up with this effect.

The Code

Styling the Map

Google makes it really easy to style your map in any color scheme you want. Read more about your options at

The most important option to set is the hue.

The map will take on whatever color you specify hear. It almost looks like a transparent layer is layed over the top. It is a true hue, and not really a color scheme, so you may have to tweak it here and there to get the color scheme you are looking for.

Other elements you can modify are roads, landscape, water, and even schools. There are plenty more, and I suggest exploring Google’s documentation to see if your needs can be met.

For each element set, we’re able to specify a few “stylers”. Lightness, saturation and visibility can all be modified to create a style that fits the theme of your site. Here is an example of how I styled “water” in the above example.

Adding Custom Markers

Want to really take your map to the next level? Try adding a custom marker to your map to show your visitors where your business is without comprising on your sites style guidelines? The documentation can be found here:

As long as you’ve previously specified your latitude and longitude in a variable like so:

You can add a new marker by adding a few more lines of Javascript.

Adding a Custom Legend

I chose not to in my example, but you certainly could. Here is the documentation:

Because the legend is essentially a div, you can style it however you’d like by using the #legend selector.

So, there you have it – pretty simple right? Play around with it and see what you can come up with!

Feeling a bit unoriginal, or have a lack of creativity? Check out Snazzy Maps for a bunch of pre-created styled maps that you can copy and customize for your needs!

The following two tabs change content below.
Founder at Inbounderish
Brad Knutson is a Web Developer in the Twin Cities area of Minnesota. He has experience working with WordPress and Drupal, and also has an interest in SEO and Inbound Marketing.

Keep Up-to-Date



See a complete list of topics discussed in blog posts here.

Check These Out

Get 2 Weeks Free! Sign Up Today! Premium Managed WordPress Hosting Genesis Framework for WordPress SEO is complex. Tools should be simple. Thesis Theme for WordPress:  Options Galore and a Helpful Support Community

10 thoughts on “How To Create a Custom Google Map For Your Business

    1. Brad Knutson Post author

      By slider do you mean map? Do you have a live page I could look at to troubleshoot for you?

  1. trueternalbeauty

    I figured out the slider portion however I can’t get the previous and next or captions to show despite the fact that they are housed in an image folder in the same directory as my bxslider.css file. I’m working locally

  2. trueternalbeauty

    For whatever reason when I attempt to comment on the jquery slider post you have where you used bxslider the comment gets send to this how to create a map post. I’m having problems with the bx slider.

    1. Brad Knutson Post author

      Which post are you referring to? I have several posts using sliders (multiple that make use of the bxslider plugin).

    1. Brad Knutson Post author

      Do you have a live site I can look at? If you have the images for the previous and next icons in the same directory as the CSS, make sure your CSS is pointing to the image – in my example the images are in a folder “images” in the same directory as the CSS file.

  3. oli

    hi brad,

    i have built a very complex map (markers, info windows, etc.) and i would like to some style to it.
    what i struggle with is where to place those code pieces.
    i have tried various positions, but it will not style it.

    thx for any idea

    1. Brad Knutson Post author

      You can’t really apply styles to markers, you’ll need to make whatever stylistic changes to the icon itself. As far as styling a legend, you would just add #legend { /* styles go here } to your regular stylesheet.

Share Your Thoughts

Your email address will not be shown.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">