Component: Google Maps Markers, popups & custom styles

Component location

The component files are located in src/components/layout/map. Inside you’ll find:

• JS files with map logic and settings.
• HTML example snippet.
• SCSS file for map and marker styling.

Google Maps API key

For full Google Maps functionality you should generate your own API key and add it to the constant MAP_KEY in the component settings file:

src/components/layout/map/_settings.js

Basic usage

To render a map, create a wrapper with data-anim-map. Inside it define the map body and one or more markers.

<div data-anim-map class="map">

	<div
		data-anim-map-marker
		class="map__marker"
		data-anim-map-lat="50.449688"
		data-anim-map-lng="30.52348"
		data-anim-map-title="Title 1">
	</div>

	<div
		data-anim-map-body
		class="map__body"
		data-anim-map-lat="50.449688"
		data-anim-map-lng="30.52348">
	</div>

</div>

Available data attributes

• data-anim-map — map wrapper.
• data-anim-map-body — element where the map is rendered.
• data-anim-map-marker — marker element.
• data-anim-map-lat / data-anim-map-lng — coordinates for map center and markers.
• data-anim-map-title — tooltip title for a marker.
• data-anim-map-icon — custom marker icon image.
• data-anim-map-marker-zoom — zoom to marker on click.
• data-anim-map-marker-popup — opens a popup on marker click (see Popup component).

Marker popup integration

Markers can trigger modal windows. Add data-anim-map-marker-popup with the popup name.

<div
	data-anim-map-marker
	data-anim-map-lat="50.449688"
	data-anim-map-lng="30.52348"
	data-anim-map-marker-popup="contactPopup"
	class="map__marker">
</div>

Download

Add interactive Google Maps with markers, popups and custom styles. Download the template and integrate maps faster.