javascript機能を使用している画像ソースが変更されていません

Question

衛星地図から完全静止画像を表示します。

たとえば、緯度と経度のみが定義されている5つの静止画像を表示する必要があります。

私は、静的なマップのAPIを使用してそれをやったこのJsfiddle

のようにそれをやりました。

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

imgの代わりにdivにイメージソースを割り当てています。また、構文エラーが修正されました。

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" />