javascript - 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="?&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>

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./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>

Share Improve this question edited Oct 29, 2014 at 13:08 asked Oct 21, 2014 at 9:24 Steph 6594 gold badges14 silver badges33 bronze badges

I've had succes using an iFrame as the InfoWindow's content: <iframe title="YouTube video player" class="youtube-player" type="text/html" width="480" height="390" src="youtube./embed/UmFjNiiVk9w?rel=0" frameborder="0"></iframe>! – yesman Commented Oct 29, 2014 at 13:21
have you just added a video to a website or the video is appended to the marker? – Steph Commented Oct 29, 2014 at 13:23
No, the video is just HTML that calls a different website. See the other answers for more info. – yesman Commented Oct 29, 2014 at 13:27

Add a ment |

2 Answers 2

Sorted by: Reset to default 6 +50

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./en/tutorials/video/basics/devstories.webm" type="video/webm;">' +
    '<source src="http://www.html5rocks./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./maps/api/js?&sensor=false"></script>
<div id="googleMap" style="width:500px; height:500px;"></div>

EDIT

the video I used es from this page

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./embed/0vrdgDdPApQ?rel=0" frameborder="0"></iframe>'
      });

      infowindow.open(map, curepipe);
}

HTML:

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

DEMO

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - Attach video to marker using google map API - Stack Overflow

2 Answers 2

与本文相关的文章

评论列表(0)