Clever Geek Handbook

Attach video to marker using google map API

Desired output: attach video to marker

What else has been achieved: basic google code codes for placing a marker in a specific location

Idea: use the marker variable defined for video attachment

Tried using Infowindow but it doesn't show video. Please note that the video is in the same folder as the file containing my code. Can anyone please help?

<!DOCTYPE html>
<html>
<head>
<script src="http://maps.googleapis.com/maps/api/js?&sensor=false">
</script>

<script>

   function initialize()
   {
        var mapProp = {
            center:new google.maps.LatLng(-20.240154, 57.589669),
            zoom:10,
            mapTypeId:google.maps.MapTypeId.ROADMAP
   };
  var map=new google.maps.Map(document.getElementById("googleMap"),mapProp);

var curepipe=new google.maps.Marker({
    position: new google.maps.LatLng(-20.318813, 57.524149)
});

curepipe.setMap(map);
var infowindow = new google.maps.InfoWindow({
      content:"Hello World!"
});

 infowindow.open(map,marker);
 }

  }

   google.maps.event.addDomListener(window, 'load', initialize);
 </script>
 </head>

+3


source to share


2 answers


Basically you had it all, you just need to add the video element to InfoWindow

, also make sure your video files are available through your server.

Aaaand, with a few minor changes:



function initialize() {
  var mapProp = {
    center: new google.maps.LatLng(-20.240154, 57.589669),
    zoom: 10,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };

  var map = new google.maps.Map(document.getElementById("googleMap"), mapProp);
  var curepipe = new google.maps.Marker({
    position: new google.maps.LatLng(-20.318813, 57.524149)
  });

  curepipe.setMap(map);

  var infowindow = new google.maps.InfoWindow({
    content: '<video controls="" style="width:100px;height:100px;" poster="poster.png">' +
    '<source src="http://www.html5rocks.com/en/tutorials/video/basics/devstories.webm" type="video/webm;">' +
    '<source src="http://www.html5rocks.com/en/tutorials/video/basics/devstories.mp4" type="video/mp4;">' +
    '</video>'
  });

  infowindow.open(map, curepipe);
}

google.maps.event.addDomListener(window, 'load', initialize);
      

        
        
        
      

    
<script src="https://maps.googleapis.com/maps/api/js?&sensor=false"></script>
<div id="googleMap" style="width:500px; height:500px;"></div>
Run codeHide result


EDIT

the video I use comes from this page

+6


source


You can do this by adding an iframe;

Try:

   function initialize() {

      var mapProp = {
          center: new google.maps.LatLng(-20.240154, 57.589669),
          zoom: 10,
          mapTypeId: google.maps.MapTypeId.ROADMAP
      };

      var map = new google.maps.Map(document.getElementById("googleMap"), mapProp)
      var curepipe = new google.maps.Marker({
          position: new google.maps.LatLng(-20.318813, 57.524149)
      });

      curepipe.setMap(map);
      var infowindow = new google.maps.InfoWindow({
          content: '<iframe title="YouTube video player" type="text/html" width="100%" height="100%" src="https://www.youtube.com/embed/0vrdgDdPApQ?rel=0" frameborder="0"></iframe>'
      });

      infowindow.open(map, curepipe);
}


HTML:

 <div id="googleMap" style="width: 100%; height: 100%"></div>

DEMO

+1


source






More articles:


All Articles