изменить источник изображения с функцией javascript не работает

Question

Я хочу отображать полностью статические изображения со спутниковой карты.

Например, мне нужно отобразить 5 статических изображений, в которых определены только широта и долгота.

Я сделал это, как этот Jsfiddle

Я сделал это с помощью статической карты API.

Example: 
<img src="http://maps.google.com/maps/api/staticmap?center=20.1,20.1,NY&zoom=18&size=200x200&maptype=satellite"/> 

Но мне нужно изменить его, потому что эти изображения должны отображаться динамически. По некоторым причинам функция javascript не выполняется. Помоги мне!

function addImageSource(number,lat, lon) { 
var imageSource = "http://maps.google.com/maps/api/staticmap?center=" + lat + "," + lon + ",NY&zoom=18&size=200x200&maptype=satellite"; 
$("#item" + number).attr("src", imageSource); 
} 

addImageSource(1,20.123456, 21.123456); 
addImageSource(2,21.123456, 21.123456); 
addImageSource(3,22.123456, 21.123456); 
addImageSource(4,23.123456, 21.123456); 
addImageSource(5,24.123456, 21.123456); 
addImageSource(6,25.123456, 21.123456); 

HTML-код:

<div id='item1'> <img/> </div> 
<div id='item2'> <img/> </div> 
<div id='item3'> <img/> </div> 
<div id='item4'> <img/> </div> 
<div id='item5'> <img/> </div> 
<div id='item6'> <img/> </div> 

Может кто-нибудь помочь мне, пожалуйста, как я могу добиться этого наилучшим образом?

Answer 1

Вы назначаете источник изображения div вместо img. Также исправлена ​​некоторая синтаксическая ошибка.

1. var imageSource - это строка и должна заканчиваться ". Следовательно, обновлено =satellite до =satellite";.
2. Пропала запятая до NY&zoom. Так обновлено NY&zoom до ,NY&zoom.

Updated Fiddle.

function addImageSource(number, lat, lon) { 
 
    var imageSource = "http://maps.google.com/maps/api/staticmap?center=" + lat + "," + lon + ",NY&zoom=18&size=200x200&maptype=satellite"; 
 
    $("#item" + number + " img").attr("src", imageSource); 
 
} 
 

 
addImageSource(1, 20.123456, 21.123456); 
 
addImageSource(2, 21.123456, 21.123456); 
 
addImageSource(3, 22.123456, 21.123456); 
 
addImageSource(4, 23.123456, 21.123456); 
 
addImageSource(5, 24.123456, 21.123456); 
 
addImageSource(6, 25.123456, 21.123456);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div id='item1'> <img/> </div> 
 
<div id='item2'> <img/> </div> 
 
<div id='item3'> <img/> </div> 
 
<div id='item4'> <img/> </div> 
 
<div id='item5'> <img/> </div> 
 
<div id='item6'> <img/> </div> 
 

 
<br/> 
 
Example: 
 
<br> 
 
<img src="http://maps.google.com/maps/api/staticmap?center=20.123456.1,21.123456,NY&zoom=18&size=200x200&maptype=satellite" />