Leaflet Marker Popups

by grant

HTML

<script src="http://cdn.leafletjs.com/leaflet-0.4.5/leaflet.js"></script>
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.4.5/leaflet.css">
<div id="map" ></div>
<a id="marker_1" href="#">Marker 1</a>
<br>
<a id="marker_2" href="#">Marker 2</a>
<br>
<a id="marker_3" href="#">Marker 3</a>
<div>
<img class="dog" src="" alt="img">
</div>

CSS

#map {
 width: 500px;
 height: 200px;
  }
.dog {
    border: 1px dashed green;
    width: 350px;
    height: 220px;
    object-fit: contain; 
    
    /* object-fit: scale-down; */
}

JavaScript

var map = L.map('map').setView([51.495, -0.09], 15);
var osmUrl = 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png';
var osmLayer = new L.TileLayer(osmUrl, {
  maxZoom: 19,
  attribution: 'Map data © OpenStreetMap contributors'
});
map.addLayer(osmLayer);

//this section sets the behavior of the markers themselves
var marker1 = L.marker([51.497, -0.09], {
  title: "marker_1"
}).addTo(map).bindPopup("Marker 1").on('click', clickZoom);
var marker2 = L.marker([51.495, -0.083], {
  title: "marker_2"
}).addTo(map).bindPopup("Marker 2").on('click', clickZoom);
var marker3 = L.marker([51.49, -0.097], {
  title: "marker_3"
}).addTo(map).bindPopup("Marker 3").on('click', clickZoom);

function clickZoom(e) {
	map.setView(e.target.getLatLng(),15);
}

//everything below here controls interaction from outside the map
var markers = [];
markers.push(marker1);
markers.push(marker2);
markers.push(marker3);

function markerFunction(id) {
  for (var i in markers) {
    var markerID = markers[i].options.title;
    var position = markers[i].getLatLng();
    if (markerID == id) {
    	map.setView(position, 15);
      markers[i].openPopup();
    }
  }
}

$("a").click(function() {
  markerFunction($(this)[0].id);
});
// =============== image
			var imgUrl = "https://images.drivebc.ca/bchighwaycam/pub/cameras/11.jpg"
			placeDog = "https://place.dog/300/200"
			randomDog = "https://random.dog/woof.json?filter=mp4,webm/" // https://github.com/AdenFlorian/random.dog
			dogCeo = "https://dog.ceo/api/breeds/image/random"
			//document.querySelector(".place-dog").src=placeDog;
			//document.querySelector(".myImgClass").src=imgUrl;
			async function foo(whichAPI) {
				let obj;
				const res = await fetch(whichAPI)
				obj = await res.json();
				
				//console.log(obj)
				console.log(obj.url);
				imgUrl = obj.url;
				document.querySelector(".dog").src = imgUrl;
			}
			//document.querySelector(".credit").src="I'm a Little Teapot";
			//document.getElementById("credit").innerHTML = "I'm a...