Google Maps as messages

In this example the messages are replaced with Google Maps pictures of places where the photos were done. Quite a nice way to share the photos with your friends and additionally show them the origin of the shots.

To learn how to make pictures like this see Google Maps API. You should use your own API key to build the maps on your web page. All the maps images are property of Google.

To see effects demos visit effects page.

JavaScript
var slider = new BeaverSlider({
  structure: {
    container: {
      id: "demo-slider",
      width: 720,
      height: 420
    },
    messages: {
      bottom: 15,
      right: 15,
      containerClass: "maps-container"
    },
    controls: {
      previewMode: false,
      align: "center",
      containerClass: "control-container",
      elementClass: "control-element",
      elementActiveClass: "control-element-active"
    }
  },
  content: {
    images: [
      "/img/slider-demo/1.jpg",
      "/img/slider-demo/2.jpg",
      "/img/slider-demo/3.jpg",
      "/img/slider-demo/4.jpg",
      "/img/slider-demo/5.jpg",
      "/img/slider-demo/6.jpg",
      "/img/slider-demo/7.jpg",
      "/img/slider-demo/8.jpg",
      "/img/slider-demo/9.jpg",
      "/img/slider-demo/10.jpg"
    ],
    messages: [
      "<img src='http://maps.googleapis.com/maps/api/staticmap?center=28.6353080,77.2249600&zoom=9&size=150x150&language=en&sensor=false&key=AIzaSyDU0Nsqv0h3SqcnDML2F4rEETHrBzHVV2A'>",
      "<img src='http://maps.googleapis.com/maps/api/staticmap?center=40.7143528,-74.0059731&zoom=9&size=150x150&language=en&sensor=false&key=AIzaSyDU0Nsqv0h3SqcnDML2F4rEETHrBzHVV2A'>",
      "<img src='http://maps.googleapis.com/maps/api/staticmap?center=55.7558260,37.6173000&zoom=9&size=150x150&language=en&sensor=false&key=AIzaSyDU0Nsqv0h3SqcnDML2F4rEETHrBzHVV2A'>",
      "<img src='http://maps.googleapis.com/maps/api/staticmap?center=52.5200066,13.4049540&zoom=9&size=150x150&language=en&sensor=false&key=AIzaSyDU0Nsqv0h3SqcnDML2F4rEETHrBzHVV2A'>",
      "<img src='http://maps.googleapis.com/maps/api/staticmap?center=48.1351253,11.5819806&zoom=9&size=150x150&language=en&sensor=false&key=AIzaSyDU0Nsqv0h3SqcnDML2F4rEETHrBzHVV2A'>",
      "<img src='http://maps.googleapis.com/maps/api/staticmap?center=51.5112139,-0.1198244&zoom=9&size=150x150&language=en&sensor=false&key=AIzaSyDU0Nsqv0h3SqcnDML2F4rEETHrBzHVV2A'>",
      "<img src='http://maps.googleapis.com/maps/api/staticmap?center=48.8566140,2.3522219&zoom=9&size=150x150&language=en&sensor=false&key=AIzaSyDU0Nsqv0h3SqcnDML2F4rEETHrBzHVV2A'>",
      "<img src='http://maps.googleapis.com/maps/api/staticmap?center=48.2081743,16.3738189&zoom=9&size=150x150&language=en&sensor=false&key=AIzaSyDU0Nsqv0h3SqcnDML2F4rEETHrBzHVV2A'>",
      "<img src='http://maps.googleapis.com/maps/api/staticmap?center=50.0755381,14.4378005&zoom=9&size=150x150&language=en&sensor=false&key=AIzaSyDU0Nsqv0h3SqcnDML2F4rEETHrBzHVV2A'>",
      "<img src='http://maps.googleapis.com/maps/api/staticmap?center=41.8929163,12.4825199&zoom=9&size=150x150&language=en&sensor=false&key=AIzaSyDU0Nsqv0h3SqcnDML2F4rEETHrBzHVV2A'>"
    ]
  },
  animation: {
    waitAllImages: true,
    effects: effectSets["slider: big set 2"],
    initialInterval: 1000,
    interval: 2000,
    showMessages: "linked",
    messageAnimationDirection: "right",
    messageAnimationDuration: 600,
    messageAnimationMaxHorLength: 200,
    messageAnimationMaxVerLength: 100,
    changeSameMessage: false
  }
});   
CSS
/* google maps */
.maps-container {
  background: rgba(42,42,42,0.6);
  padding: 5px 5px 3px 5px;
} 

.maps-container img {
  /* fixed size is needed for animation */
  width: 150px;
  height: 150px;
}