Setting Up a Custom Google Map in Bullseye with Snazzy Maps

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.

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.

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() {
if(map != undefined){
var mapStyles =
/*begin Snazzy Maps javascript style array*/
[{"featureType":"landscape","stylers":[{"saturation":-100},{"lightness":65},{"visibility":"on"}]},{"featureType":"poi","stylers":[{"saturation":-100},{"lightness":51},{"visibility":"simplified"}]},{"featureType":"road.highway","stylers":[{"saturation":-100},{"visibility":"simplified"}]},{"featureType":"road.arterial","stylers":[{"saturation":-100},{"lightness":30},{"visibility":"on"}]},{"featureType":"road.local","stylers":[{"saturation":-100},{"lightness":40},{"visibility":"on"}]},{"featureType":"transit","stylers":[{"saturation":-100},{"visibility":"simplified"}]},{"featureType":"administrative.province","stylers":[{"visibility":"off"}]},{"featureType":"water","elementType":"labels","stylers":[{"visibility":"on"},{"lightness":-25},{"saturation":-100}]},{"featureType":"water","elementType":"geometry","stylers":[{"hue":"#ffff00"},{"lightness":-25},{"saturation":-97}]}]
/*end Snazzy Maps javascript style array*/
map.setOptions({styles: mapStyles });
}
});});
</script>

Now, Save your interface.

The Result

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

Choose Any Style You Like

There are many more color schemes you can implement. Go to https://snazzymaps.com/explore 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.

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

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