Question

I have a javascript map I’m using and I’m trying to add an image to the tooltip

Here is the code:

var shardicon = L.Icon.extend({
        iconUrl: 'images/A.png',
        shadowUrl: '',
        iconSize: new L.Point(20, 30),
        iconAnchor: new L.Point(10, 15),
        popupAnchor: new L.Point(-0, -20)
    });

    var shard = new shardicon()
    var marker7 = new L.Marker(new L.LatLng(51.504409, -0.086335), {icon: shard})
    marker7.bindPopup("<h1>The Shard</h1>");

when I try to add an image reference into the HTML bit (the shard bit) it closes the ‘quote marks’ and breaks.

Any idea on how I would go about this?

Thanks in advance!

Answer 1

In Javascript, you can use both double quote and single quotes, using one to delimit the outside string for the JS interpreter and the other for your HTML like this:

marker7.bindPopup("<h1>The Shard<img src='images/A.png'></h1>");

or, it can be done like this too:

marker7.bindPopup('<h1>The Shard<img src="images/A.png"></h1>');