Introduction

The Snazzy Google Maps component for Framer allows you to integrate a highly customizable Google Map into your project. It gives you full control over how your property’s location is presented to users, with a range of features that let you tweak the appearance and functionality to suit your needs. Let’s go over each option and how you can use them to make the most of this tool.

Location

Input the exact latitude and longitude of your property here to make sure the map pinpoints your property accurately. This way, visitors will have no trouble locating your property, no matter where they’re viewing from.

API Key

To use Google Maps, you’ll need a valid Google Maps API Key. Just enter your key in this field, and the map functionality will activate. Don’t have an API key yet? You can generate one from the Google Cloud Console in a few easy steps.

Map Styles

One of the most powerful features of this component is the ability to customize the map’s look and feel. By entering JSON configuration from Snazzy Maps, you can change the map’s style to match your branding. Whether you want to tweak the color scheme, hide certain map elements like roads, or give the map a unique design, you can easily do so. Snazzy Maps offers a vast collection of pre-made styles, making customization effortless.

Custom Marker

You can replace the default Google Maps pin with something that better reflects your property or brand. Upload an image, like a custom icon or logo, to use as a marker, adding a personal touch to your map.

Street View

This option lets you enable or disable Street View. When enabled, users can explore the surrounding area with 360-degree panoramic views, creating a more immersive experience. If you prefer not to have this feature, simply set it to Hide.

Map/Satellite View

Switch between a traditional map view or a detailed satellite view. If you want to show an aerial image of the location, select Show for satellite view. If a cleaner, more minimal look is what you’re going for, you can stick with the standard map view.

Fullscreen Option

By enabling the Fullscreen option, users will be able to expand the map to fill their screen. This feature is particularly useful for mobile users or those on smaller devices who might want a better overview of the property’s location.

Zoom Level

The Zoom Level slider allows you to control how close or far the map is when it first loads. A higher zoom level focuses in on your property, while a lower zoom level gives a broader view of the surrounding area. Adjust this to offer either a detailed look or a more expansive perspective.

Disable Pan

If you want to lock the map’s view to keep the focus solely on your property, set the Disable Pan option to Yes. This prevents users from moving the map around, ensuring the map remains centered on your property at all times.