Dynamically Add Image To Infowindow

问题

I wonder whether someone may be able to help me please.

I'm using the code below to load images onto a HTML page, which are pertient to the current 'Location' and 'User' id's.

<div id="galleria">
                  <?php
                    $dirlist = getFileList($galleryPath, true);
                    $x = 0;
                    foreach($dirlist as $file) { 
                        if((preg_match("/\.jpg$/", $file['name'])) or (preg_match("/\.jpeg$/", $file['name'])) or (preg_match("/\.png$/", $file['name'])) or (preg_match("/\.bmp$/", $file['name'])) or (preg_match("/\.gif$/", $file['name']))) { 
                            echo "<img src='{$file['name']}' />"; 
                            $x = 1;
                        }
                    }
                    if ($x == 0) {
                        echo "<img src='images/noimage.jpg' />";
                    }
                    ?>
                </div>

This works fine, but I'm having difficulty with two aspects of this. I'm trying to only show the first image and put that image in the 'Infowindow' rather than on the main page. But I have to be absolutely honest and say I'm not even sure where to begin. It's taken me a few days just to to get to this point.

The code below, is an extract from the script which creates the marker and the Infowindow.

downloadUrl("loadlocationfinds.php?locationid=<?php echo $lid?>", function(data) { 
            var xml = data.responseXML; 
            var markers = xml.documentElement.getElementsByTagName("marker"); 
            var bounds = new google.maps.LatLngBounds(); 
            for (var i = 0; i < markers.length; i++) { 
            var findid = markers[i].getAttribute("findid"); 
            var locationid = markers[i].getAttribute("locationid"); 
            var findosgb36lat = markers[i].getAttribute("findosgb36lat");
            var findosgb36lon = markers[i].getAttribute("findosgb36lon");
            var findcategory = markers[i].getAttribute("findcategory"); 
            var point = new google.maps.LatLng( 
            parseFloat(markers[i].getAttribute("findosgb36lat")), 
            parseFloat(markers[i].getAttribute("findosgb36lon")));
            var html = "<span class='h3 orange'><strong>" + 'Item Found: ' + "</strong></span><br>" + finddescription + "<br>"; 
            var icon = customIcons[findcategory] || {}; 
            var marker = new google.maps.Marker({ 
            map: map, 
            position: point, 
            title: 'Click to view details', 
            icon: icon.icon, 
            shadow: icon.shadow,
            formfindosgb36lat: findosgb36lat,
            formfindosgb36lon: findosgb36lon,
            formfindcategory: findcategory,
            }); 
            bounds.extend(point); 
            map.fitBounds(bounds); 
            bindInfoWindow(marker, map, infoWindow, html);
            google.maps.event.addListener(marker, "click", function() {
            document.getElementById('findosgb36lat').value = this.formfindosgb36lat; 
            document.getElementById('findosgb36lon').value = this.formfindosgb36lon; 
            document.getElementById('findcategory').value = this.formfindcategory; 
            }); 
            } 
            }); 
            } 

            function bindInfoWindow(marker, map, infoWindow, html) {     
            google.maps.event.addListener(marker, 'click', function() {         
            infoWindow.setContent(html);         
            infoWindow.open(map, marker, html);     
            }); 
            }

I just wondered whether someone may be able to take a look at this please and offers a little help so that I'm able to only show the first image within the 'Infowindwow'.

Many thanks and the kindest regards

回答1:

The image is added to the html of the infowindow

........................
var html = "<span class='h3 orange'><strong>" + 'Item Found: ' + "</strong></span><br>" +     finddescription + "<br>"; 
html+= "<img src=\"image.jpg\" alt=\"My Image\" height=\"Ypx\" width=\"Xpx\"><br>";
........................

Where X and Y are integers

来源：https://stackoverflow.com/questions/13331774/dynamically-add-image-to-infowindow

标签

google-maps-api-3

infowindow