javascript - Attach video to marker using google map API -
desired output: attach video marker
what has been achieved yet: basic google map codes place marker @ specific location
idea: utilize marker variable defined attach video
tried using infowindow doesnt show video. note video in same folder file contains code. can 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>
you had already, needed add together html5 video element infowindow, ensure video files accessible via server.
aaaand, few minor changes:
class="snippet-code-js lang-js prettyprint-override">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); class="snippet-code-html lang-html prettyprint-override"><script src="https://maps.googleapis.com/maps/api/js?&sensor=false"></script> <div id="googlemap" style="width:500px; height:500px;"></div>
edit
the video used comes this page
javascript html google-maps google-maps-markers
No comments:
Post a Comment