CODEWITHSUNDEEP
javascripthtmlgoogle-mapsgoogle-maps-markers
Steph
Steph

Reputation: 649

Attach video to marker using google map API

Desired output: attach a video to a marker

What has been achieved yet: basic google map codes to place a marker at a specific location

Idea: use the marker variable defined to attach the video

Tried using Infowindow but it doesnt show the video. Note that the video is in the same folder as the file which contains my code. Can anyone help please?

<!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>

Upvotes: 3

Views: 3399

Answers (2)

laaposto
laaposto

Reputation: 12213

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

Upvotes: 1

epoch
epoch

Reputation: 16605

You basically had everything already, just needed to add an html5 video element to the InfoWindow, also ensure your video files are accessible via your server.

Aaaand, with just 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>

EDIT

the video I used comes from this page

Upvotes: 6

Related Questions