How To Customize Google Maps With Snazzy Maps

Snazzay maps lets you easily customize Google maps to fit your branding or your site's personality.

Requirements: Any paid subscription.

Get the "Snazzy" Code

Often we get the question from clients, “Can I customize the map to match my site?” And we say—NO PROBLEM!

Sometimes the look of a standard Google Map doesn’t cut it for websites that need a more elegant or specialized look. It is actually very easy to customize the styles of the Google Map with a standard Bullseye interface. Just follow these quick and easy instructions to style and brand your classic store locator.

The following will demonstrate how to get a simple black and white custom Google Map with a standard Bullseye interface using code from Snazzy Maps.

Copy and Paste the Code

Login to your Bullseye Admin and create an Interface. Once your interface is created, select Edit on the interface you wish to style.

edit interface

Then go to the Styles section and click on the Advanced tab. This is where you’ll add the javascript code to style the map in your search interface.

paste code

Copy all of the following base code into the Advanced Style Settings field:

<script>$(function () { if (typeof(Sys) !== 'undefined') Sys.Application.notifyScriptLoaded(); Sys.Application.add_load(function() {<br>if(map != undefined){<br>var mapStyles =<br>/*begin Snazzy Maps javascript style array*/
/*end Snazzy Maps javascript style array*/<br>map.setOptions({styles: mapStyles });<br>}<br>});});<br></script>

Now, Save your interface.

The Result

Here’s one example of a store locator with a black and white Google Map.

black and white Google Map for your store locator

Choose Any Style You Like

There are many more color schemes you can implement. Go to and choose the style that works best for your website.

Be sure to replace the javascript style array with the one of your choice. To do this correctly, you need to replace the yellow highlighted portion of the code above with the new code you get from Snazzy Maps.

snazzy maps copy code

Save any changes you make, and you’re all setup!

Implementing Snazzy maps with the new React interface

The method for implementing Snazzy maps with our new Embeddable React Interface is a little different. For the new React interface, we can use the “googleMapStyle” variable in Advanced Style, and define it with our desired styles, like this:

window.bullseyeLocationsConfig = {<br>googleMapStyle: [<br>{featureType: 'landscape',<br>stylers: [{ saturation: -100 }, { lightness: 65 }, { visibility: 'on' }],},<br>{featureType: 'poi',<br>stylers: [<br>{ saturation: -100 },<br>{ lightness: 51 },<br>{ visibility: 'simplified' },],},<br>{featureType: 'road.highway',<br>stylers: [{ saturation: -100 }, { visibility: 'simplified' }],},<br>{featureType: 'road.arterial',<br>stylers: [{ saturation: -100 }, { lightness: 30 }, { visibility: 'on' }],},<br>{featureType: 'road.local',<br>stylers: [{ saturation: -100 }, { lightness: 40 }, { visibility: 'on' }],},<br>{featureType: 'transit',<br>stylers: [{ saturation: -100 }, { visibility: 'simplified' }],},<br>{featureType: 'administrative.province',<br>stylers: [{ visibility: 'off' }],},<br>{featureType: 'water',<br>elementType: 'labels',<br>stylers: [{ visibility: 'on' }, { lightness: -25 }, { saturation: -100 }],},<br>{featureType: 'water',<br>elementType: 'geometry',<br>stylers: [{ hue: '#ffff00' }, { lightness: -25 }, { saturation: -97 }],},],};

To learn more about creating an embeddable interface, visit our Knowledge Base.