javascript - GoogleMaps api: How to place images in the content of Multiple InfoWindows? -

in brief, want combine these 2 topics:

how add image infowindow of marker in google maps v3?

google maps js api v3 - simple multiple marker example

i have location data stored in database , retrieved array. want place marker , infowindow each of x amount of locations in database. 1 of fields contains image , want include in infowindow content.

here far:

php: // create connection $con=mysqli_connect("*******","*******","*******","tests");

// check connection if (mysqli_connect_errno($con)) {  echo "failed connect mysql: " . mysqli_connect_error(); }  $result = mysqli_query($con,"select name, latitude, longitude, image locate_coords");   while($row = mysqli_fetch_array($result)) { $users[]= $row;  } 

javascript function initialize():

<?php $js_array = json_encode($users); echo "var locations = ". $js_array . ";\n"; ?>  var styles = [    {      stylers: [        { hue: "#00ffe6" },        { saturation: -20 },      ]    },{      featuretype: "road",      elementtype: "geometry",      stylers: [        { lightness: 100 },        { visibility: "simplified" },      ]    },{      featuretype: "road",      elementtype: "labels",      stylers: [        { visibility: "off" }      ]    }  ];  var styledmap = new google.maps.styledmaptype(styles,    {name: "styled map"});  var mapprop = {    zoom: 12,    center: new google.maps.latlng(51.508742,-0.120850),    maptypecontroloptions: {      maptypeids: [google.maps.maptypeid.roadmap, 'map_style']    }  };   var map = new google.maps.map(document.getelementbyid('map-canvas'),    mapprop);      var infowindow = new google.maps.infowindow();    var marker, i;     (i = 0; < locations.length; i++) {        //var container = document.getelementbyid("photo");      //var img = new image();     //img.src = '     //container.appendchild(img);       marker = new google.maps.marker({        position: new google.maps.latlng(locations[i][1], locations[i][2]),        map: map      });       google.maps.event.addlistener(marker, 'click', (function(marker, i) {        return function() {         //infowindow.setcontent('<img id=="photo">' + locations[i][0]);         infowindow.setcontent('<img src=/uploads/'. locations[i][3]'>' + locations[i][0]);         infowindow.open(map, marker);        }      })(marker, i));     }  map.maptypes.set('map_style', styledmap); map.setmaptypeid('map_style'); }  google.maps.event.adddomlistener(window, 'load', initialize); 

putting normal image url in works nicely, try putting array value, map doesn't want load! @ point, sane head tell me :-(..

there typo in line

infowindow.setcontent('<img src=/uploads/'. locations[i][3]'>' + locations[i][0]); 

. not concatenation operator , between locations[i][3]'>' there no concatenation operator @ all. correct code be:

infowindow.setcontent('<img src=/uploads/' + locations[i][3] + '>' + locations[i][0]);