Get Photos from google map api

Question

I would like to get back the photos of Google map api and to insert them into the DOM. In the documentation this codes it according to whom allows to get back the photos of several places and to use them as marker

function createPhotoMarker(place) {
var photos = place.photos;
if (!photos) {
return;
}

var marker = new google.maps.Marker({
map: map,
position: place.geometry.location,
title: place.name,
icon: photos[0].getUrl({'maxWidth': 35, 'maxHeight': 35})
});
}

that work very well bur can you show me how found photo and insert it in DOM ? I have try something like that but he's not à good way: my test. sorry for my bad English

 function callback(results, status) {
                if (status === google.maps.places.PlacesServiceStatus.OK) {
                    for (var i = 0; i < results.length; i++) {
                        createMarker(results[i]);
                        restos.push(results[i].name);
                        // console.log(results[i]);
                        var btnSuite = document.createElement('button');
                        createPhoto(results[i]); //photos test !!??
                        btnSuite.innerHTML = '<b>' + results[i].name +      '</b><br>' + results[i].vicinity + '<br>' + '<img src=' + createPhoto(results[i]) + '/>';

                        btnSuite.id = 'droiteBtns';
                        droite2.appendChild(btnSuite);



                    }

                }

            }
 function createPhoto(place) {
                var photos = place.photos;
                if (!photos) {
                    return;
                }

                var photo = photos[0].getUrl({
                    'maxWidth': 150,
                    'maxHeight': 150
                })

            }

Thanks for your help

Answer 1

You can try this: http://jsfiddle.net/mervinsamy/m1ejzt7j/

What I did was create an img object, store the image there, and then add it to an existing div.

Relevant HTML:

<div class="photos-section" id="img-container"></div>

Relevant JS:

var img = document.createElement("img") //Create object
img.src = photos[0].getUrl({'maxWidth': 100, 'maxHeight': 100}); //store image url as src attribute
document.getElementById("img-container").appendChild(img);  //add to existing div