2

Google マップを使用していて、データベースから取得した情報ウィンドウに画像を表示したいのですが、画像の代わりに画像ファイル名 (edit.png など) を表示します。しかし、どうやって画像を取得するか。

画像のパスを取得していますが、画像が表示されていません。緊急の解決策を教えてください。

 <html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Show/Add multiple markers to Google Maps from database in asp.net website
</title>

<script src="jquery.js" type="text/javascript"></script>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyC6v5- 
 2uaq_wusHDktM9ILcqIrlPtnZgEk&sensor=false">
</script>

<script type="text/ecmascript">
function initialize() {
         $.ajax
         ({ 
            type:'POST',
            url: 'MapDetais.aspx',
            data:'{}',
            dataType: 'json',
            async:false,
            success: function(data)
                {
                        for (var markers = 0; markers < data.length; markers++)
                        {
                            var name=data[markers].Name;
                            var lon=data[markers].Longitude;
                            var lat=data[markers].Latitude;
                            var desc=data[markers].Description;
                            var photo=data[markers].Photo;
                        }
                               var mapOptions =
                                {
                                center: new google.maps.LatLng(data[0].Latitude,data[0].Longitude),
                                zoom: 8,
                                mapTypeId: google.maps.MapTypeId.ROADMAP
                                }
                               debugger
                               var infoWindow;
                                var map = new google.maps.Map(document.getElementById("map_canvas"),  
  mapOptions);

                                for (i = 0; i < data.length; i++) {
                                var data1 = data[i]
                                var imgMarker= new Image();
                                imgMarker.src=data1.Photo;
                                var IMG=imgMarker.src; 

                                //imgMarker.src=data1.Photo;
                                //document.body.appendChild(imgMarker.src);
                                 var myLatlng = new google.maps.LatLng(data1.Latitude, data1.Longitude);
                                var marker = new google.maps.Marker({
                                position: myLatlng,
                                map: map

                                });
                                 var contentString='<div style="font-family:Arial, Helvetica, sans-serif;        
  font-weight:bold; color:#FF0000; font-size:12px">'
                                +data1.Name+" </div></br> <div>"+data1.Description+"</div> </br><div  
 align='center'>"+IMG+"</div></br>";
                                 infoWindow = new google.maps.InfoWindow
                                ({
                                 content:contentString,
                                 width:200,
                                 height:100
                                });
                                infoWindow.open(map,marker);

                                google.maps.event.addListener(marker, "click", function() {
                                infoWindow.open(map, marker);
                                });
                        }
                 }
          })
        }
</script>
 </head>
 <body onload="initialize()">
 <form id="form1" runat="server">
 <div id="map_canvas" style="width: 500px; height: 400px"></div>
 </form>
 </body>
 </html>
4

0 に答える 0