Bullseye

Bullseye Store Locator

Attend the Bullseye Locations GA4 webinar. November 25th. Register Free

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 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() {
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.

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 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.

snazzy maps copy code

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

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