Setting img src using a javascript variable for use in a Google Maps InfoWindow

Question

I am trying to open a Google Maps InfoWindow to show an image but I want to define the image source with a javascript variable.

Here's my Python code using Flask.

import os
from flask import Flask, render_template
from flask_jsglue import JSGlue

# Start the Flask application
app = Flask(__name__)
jsglue = JSGlue(app)

# Get the Google Maps API key from the file
with open(os.getcwd() + '/data/GoogleMapsAPIkey.txt') as f: 
    APIkey = f.readline()
    f.close
app.config['API_KEY'] = APIkey

@app.route('/')
def index():
    return render_template('./test.html', key=APIkey)

if __name__ == '__main__':
    app.run(debug=False)

And here's the HTML I am using.

<!DOCTYPE html>
<html>
<head>
    <title>Thumb in window test</title>
    {{ JSGlue.include() }}
    <meta charset="utf-8">
    <style>
        #map-canvas {
            width: 100%;
            height: 500px;
        }
    </style>
</head>
<body>
    <div id="map-canvas">
    </div>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script>
    var map;
    var thumbWindow;
    function showMap(){ 
        // Create the map
        map = new google.maps.Map(document.getElementById('map-canvas'), { 
          center: {lat: -37.8135, lng: 144.9655},
          zoom: 14
        });
        google.maps.event.addDomListener(map, 'click', showThumb);
    }
    function showThumb(){
        thumbWindow = new google.maps.InfoWindow();
        thumbWindow.setContent('<img id="thumb" src="/static/thumbs/2_thumb.JPG" align="middle">');
        thumbWindow.setPosition(map.getCenter());
        thumbWindow.open(map);
    }
    </script>
    <script async defer src="https://maps.googleapis.com/maps/api/js?key={{ key }}&callback=showMap">
    </script>
</body>
</html>

This is all working as expected but only if I fully state the image URL in the src.

If I replace the showThumb function with this....

    function showThumb(){
        var number = 2;
        var file = "/static/thumbs/" + number.toString() + "_thumb.JPG";
        thumbWindow = new google.maps.InfoWindow();
        thumbWindow.setContent('<img id="thumb" src="" align="middle">');
        thumbWindow.setPosition(map.getCenter());
        thumbWindow.open(map);
        document.getElementById("thumb").src=file;
    }

... I get an empty InfoWindow and an Uncaught TypeError: Cannot set property 'src' of null error.

It seems that Javascript can't recognise ids in an InfoWindow.

Anyone got a way to get this working?

Answer 1

Seems the I asked the question a bit too soon. I had a revelation and found a solution.

The answer was to not use an element id at all.

    function showThumb(){
        var number = 2;
        var file = "/static/thumbs/" + number.toString() + "_thumb.JPG";
        var imgCode = '<img id="thumb" src=' + file + ' align="middle">'
        thumbWindow = new google.maps.InfoWindow();
        thumbWindow.setContent(imgCode);
        thumbWindow.setPosition(map.getCenter());
        thumbWindow.open(map);
    }

Setting img src using a javascript variable for use in a Google Maps InfoWindow

Question

1 answers

solution1
-1 2020-06-04 11:34:49

Setting img src using a javascript variable for use in a Google Maps InfoWindow

Question

1 answers

solution1 -1 2020-06-04 11:34:49

solution1
-1 2020-06-04 11:34:49