/google-maps-infowindow

Customizable InfoWindow for Google Maps JavaScript API

Primary LanguageJavaScriptMIT LicenseMIT

Google maps InfoWindow

This library is design to easily add InfoWindow on Google Maps using html and CSS. It supports by default CSS animation and transition for animation, but also accepts user controlled animations through any Tween library. Transition behavior is highly inspired by @vuejs/transition.

Examples

Dependencies

Usage

Setting

<div id="popup" class="infowindow-content">
  <p class="close-cta">01011</p>
</div>
<div id="map"></div>
var map
var center = {lat: 48.864716, lng: 2.349014}
map = new google.maps.Map(document.getElementById('map'), {
  center: center,
  zoom: 13,
  styles: mapStyle
});
var marker = new google.maps.Marker({
  position: center,
  map: map
})
var element = document.body.querySelector('#popup')

API

new GoogleMapsInfowindow({
  marker: marker,
  content: element
})