Buenas, necesito orientación para hacer que una galería de Flickr y una mapa de Google Maps encajen en una página.
Necesito que la mitad izquierda de la página muestre la galería y la mitad derecha el mapa de Google Maps.
El código HTML que estoy usando el siguiente:
<title>Search results</title>
<fieldset id="googlemaps">
<legend>
Google Maps search for the location
<c:out value="${param.searchQuery}" />
</legend>
<div id="map"></div>
<script>
function initMap() {
var uluru = {lat: ${lat}, lng: ${lng}};
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 13,
center: uluru
});
var marker = new google.maps.Marker({
position: uluru,
map: map
});
}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDMPX-BlAy9WQULw6ghUPdinLeGACrjA70&callback=initMap">
</script>
</fieldset>
<fieldset id="flickr">
<legend>
Flickr search for the location
<c:out value="${param.searchQuery}" />
</legend>
<c:forEach items="${requestScope.photos.photo}" var="photo">
<img
src='http://farm<c:out value="${photo.farm}"/>.staticflickr.com/<c:out value="${photo.server}"/>/<c:out value="${photo.id}"/>_<c:out value="${photo.secret}"/>.jpg' />
<br />
<form action="/facebookPostCreation" method="post">
<textarea hidden="" name="message">I just liked a Flickr photo via Project TOROID. See it on http://farm<c:out
value="${photo.farm}" />.staticflickr.com/<c:out
value="${photo.server}" />/<c:out value="${photo.id}" />_<c:out
value="${photo.secret}" />.jpg</textarea>
<br>
<div class="bottom_links">
<button type="submit" class="button">Post in Facebook</button>
<button type="button"
onClick="javascript:window.location.href='index.html'"
class="button">Cancel</button>
</div>
</form>
</c:forEach>
</fieldset>