JS Script

Google Maps Youtube Search Script

A script to display videos recorded near your users location or any other location. Use the simple API to dynamically or statically filter the videos by keyword. Easy integration with your website.

Download

Features

  • Displays videos on an existing Google Map
  • Uses HTML5 features if available (like geolocation)
  • Simple API and simple integration
  • Search Youtube based on map location and radius
  • Videos are displayed in a “lightbox” popup on click (easily overriden with Api call)
  • Optimized and commented Javascript with MVC and Pubsub patterns
  • Prepared for Localization and language change
  • Client side only and no dependencies
  • Supports older browsers (like IE7)

Contact

For more information please contact me on email or reach out to me at @andregoncalves.

Privacy Policy and Terms of Service

By using this site and script you agree with YouTube Terms of Service and Google Privacy Policy.

Demo

Widget integration code

mappeo.initialize({
  container: 'map',
  filter: 'drone',
  geolocation: false,
  latitude: 37.73846049959617,
  longitude: -119.21915719443507,
  zoom: 8,
  orderBy: 'relevance',
  scrollwheel: false,
  channelId: false,
  gMapsApiKey: '',
  youTubeApiKey: '',
  draggable: true,
  markerClusterer: true,
  minimumClusterSize: 5
});

/* Other initialization parameters
  mapType: "ROADMAP",
  markerIcon: "url_for_icon_image",
  author: "youtube username",
  orderBy: "popular" or "rating" or "relevance" or "published",
  onVideoOpen: function callback(video) {} // return false to prevent default popup
  styles: map styling, ex:

  styles :[
    {
      stylers: [
        { hue: "#00ffe6" },
        { saturation: -20 }
      ]
    },{
      featureType: "road",
      elementType: "geometry",
      stylers: [
        { lightness: 100 },
        { visibility: "simplified" }
      ]
    },{
      featureType: "road",
      elementType: "labels",
      stylers: [
        { visibility: "off" }
      ]
    }
  ]
*/

function search() {
  var search_input = document.getElementById('filter');
  mappeo.setFilter(search_input.value);
}

Other Projects

Open Source