pmr pmr - 1 year ago 86
HTML Question

easiest way in R or Python to add image/video in map plot marker click popup/infowindow

I have many different (lat,long data) points of world associated with unique place names and corresponding each point specific image or video data. Now I want to create an html file where if user click on each point they can see that specific image or video in the pop-up/infowindow. Previously I have successfully used html files with my shiny web application.

Target examples links are as below but they are all in Java:

  1. custom image in marker

  2. custom video in marker

    // This example displays a marker at the center of Australia.
    // When the user clicks the marker, an info window opens.

    function initialize() {
    var myLatlng = new google.maps.LatLng(-25.363882,131.044922);
    var mapOptions = {
    zoom: 4,
    center: myLatlng

    var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

    var contentString = '<div id="content">'+
    '<div id="siteNotice">'+
    '<h1 id="firstHeading" class="firstHeading">Video in Info Window</h1>'+
    '<div id="bodyContent">'+
    '<iframe width="640" height="390" src="//" frameborder="0" allowfullscreen></iframe>'+

    var infowindow = new google.maps.InfoWindow({
    content: contentString

    var marker = new google.maps.Marker({
    position: myLatlng,
    map: map,
    title: 'Uluru (Ayers Rock)'
    google.maps.event.addListener(marker, 'click', function() {,marker);

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


  3. streetview image in marker

    var map;
    var mapOptions = { center: new google.maps.LatLng(0.0, 0.0), zoom: 2,
    mapTypeId: google.maps.MapTypeId.ROADMAP };

    function initialize() {
    map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
    street = new google.maps.StreetViewPanorama(document.getElementById("street"), {

    position: new google.maps.LatLng(40.72982797782924, -73.98622512817383),
    zoomControl: false,
    enableCloseButton: false,
    addressControl: false,
    panControl: false,
    linksControl: false

    var infow = new google.maps.InfoWindow({ content: document.getElementById("street") });
    var myLatLng = new google.maps.LatLng(40.72982797782924, -73.98622512817383);
    var marker = new google.maps.Marker({ position: myLatLng, map: map, visible: true });, marker);

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

First I have tried with plotGoogleMaps, there I have to manually change the generated html file javascript section code for each marker so it is becoming a lot of manual work. So alternatively Is there any way to achieve the same in " leaflet " or " rleafmap " R package or any other combination of R-based package ?

I am more from R less from Python, is there any easy solution exists in Python at least to generate that html page. I just want to build that html file so that I can use in shiny web framework.

I tried below but blank page is coming up.

<!DOCTYPE html>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta charset="utf-8">
<style type="text/css">
html { height: 100% ; font-size: small}
body { height: 100%; margin: 0px; padding: 0px }
#map_canvas {min-height: 100%;height:auto; }
#cBoxes {position:absolute;right:5px; top:50px; background:white}

<script type="text/javascript" src=""> </script>

<script language="javascript">

USGSOverlay.prototype = new google.maps.OverlayView();
function USGSOverlay(bounds, image, map) {
this.bounds_ = bounds;
this.image_ = image;
this.map_ = map;
this.div_ = null;
this.setMap(map); }
USGSOverlay.prototype.onAdd = function() {
var div = document.createElement("DIV"); = "none"; = "0px"; = "absolute";
var img = document.createElement("img");
img.src = this.image_; = "100%"; = "100%";
this.div_ = div; = 0.7;
var panes = this.getPanes();
USGSOverlay.prototype.draw = function() {
var overlayProjection = this.getProjection();
var sw = overlayProjection.fromLatLngToDivPixel(this.bounds_.getSouthWest());
var ne = overlayProjection.fromLatLngToDivPixel(this.bounds_.getNorthEast());
var div = this.div_; = sw.x + "px"; = ne.y + "px"; = (ne.x - sw.x) + "px"; = (sw.y - ne.y) + "px";}
USGSOverlay.prototype.onRemove = function() {
USGSOverlay.prototype.hide = function() { if (this.div_) { = "hidden";} } = function() {if (this.div_) { = "visible";}}
USGSOverlay.prototype.toggle = function() {
if (this.div_) {
if ( == "hidden") {;
} else {
this.hide(); } } }
USGSOverlay.prototype.toggleDOM = function() {
if (this.getMap()) {
} else {
function setOpacR(Raster,textname) {
opac=0.01*parseInt(document.getElementById(textname).value) opac }

// bounds of the desired area
var allowedBounds = new google.maps.LatLngBounds(
new google.maps.LatLng(28.70, -127.50),
new google.maps.LatLng(48.85, -55.90)
var boundLimits = {
maxLat : allowedBounds.getNorthEast().lat(),
maxLng : allowedBounds.getNorthEast().lng(),
minLat : allowedBounds.getSouthWest().lat(),
minLng : allowedBounds.getSouthWest().lng()

var images = [{url:"", position:new google.maps.LatLng(27.7220605,91.8254337)},
url:"", position:new google.maps.LatLng(15.5967635,73.8928171)},
url:"", position:new google.maps.LatLng(30.9740215,77.1982669)},
url:"", position:new google.maps.LatLng(12.303889,76.654444)}];

for(var i=0l i<images.length; i++){
var m = new google.maps.Marker({position:images[i].position});
m.infow = new google.maps.InfoWindow("HTML using image template, splicing in the URL using '+''s");
google.maps.event.addListener(m, 'click', function(){


Answer Source

Assuming you already have a list of URLs for images and/or videos, it would literally be as simple as iterating through them in JavaScript, and assembling the HTML in JavaScript. It would be unnecessarily complicated to make a ton of HTML pages, and have to call them.

var images = [{url:"", position:new google.maps.LatLng()}, ....];
var videos = [{url:"", position:new google.maps.LatLng()}, ....];
for(var i=0l i<images.length; i++){
  var m = new google.maps.Marker({position:images[i].position});
  m.infow = new google.maps.InfoWindow("HTML using image template, splicing in the URL using '+''s");
  google.maps.event.addListener(m, 'click', function(){
//same for videos

Instead of copy and paste, this will be efficient, readable, and scalable.

Therefore, as far as I understand your problem, you do not need Python or R to solve it.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download