Hello very good everyone I have a query I have this code in javascrip to be able to generate bookmarks in google maps, and been trying to make that by pressing a bookmark I see information about that bookmark in the modal and so with each one of the bookmarks , but is there no case someone has some idea of how to do it?
JAVASCRIPT
var map = new google.maps.Map(document.getElementById('map'), {
center: new google.maps.LatLng(-40.573834, -73.135752),
zoom: 14
});
var infoWindow = new google.maps.InfoWindow;
// Change this depending on the name of your PHP or XML file
downloadUrl(downloadUrlText, function (data) {
var xml = data.responseXML;
var markers = xml.documentElement.getElementsByTagName('marker');
Array.prototype.forEach.call(markers, function (markerElem) {
var id = markerElem.getAttribute('id');
var name = markerElem.getAttribute('nombre');
var address = markerElem.getAttribute('descripcion');
var type = markerElem.getAttribute('tipo');
var point = new google.maps.LatLng(
parseFloat(markerElem.getAttribute('latitud')),
parseFloat(markerElem.getAttribute('longitud')));
var infowincontent = document.createElement('div');
var strong = document.createElement('strong');
strong.textContent = name
infowincontent.appendChild(strong);
infowincontent.appendChild(document.createElement('br'));
var text = document.createElement('text');
text.textContent = address
infowincontent.appendChild(text);
var marker = new google.maps.Marker({
map: map,
position: point,
icon: iconos[type].icon,
});
marker.addListener('click', function () {
$("#myModal").modal();
infoWindow.setContent(infowincontent);
infoWindow.open(map , marker);
});
});
});
}
function downloadUrl(url, callback) {
var request = window.ActiveXObject ?
new ActiveXObject('Microsoft.XMLHTTP') :
new XMLHttpRequest;
request.onreadystatechange = function () {
if (request.readyState == 4) {
request.onreadystatechange = doNothing;
callback(request, request.status);
}
};
request.open('GET', url, true);
request.send(null);
}
function doNothing() {
}
and I also have my modal MODAL: '
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4><span class="glyphicon glyphicon-map-marker"></span> Nombre</h4>
</div>
<div class="modal-body">
<div class="form-group">
<p><strong>Descripción:</strong></p>
<p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."</p>
<p><strong>Mision actual:</strong></p>
<blockquote class="blockquote-reverse">
<img src="asd.png" class="img-thumbnail" style="border: 0px;" alt="Responsive image">
<footer>sd</footer>
</blockquote>
</div>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-danger btn-default pull-left" data-dismiss="modal">
<span class="glyphicon glyphicon-remove"></span> Cerrar
</button>
<p>Reportar error <a>Aqui!</a></p>
</div>
</div>
</div>
</div> '
What I have is this I certainly only need to be able to send the data from the selected marker to the modal (The image represents what happens when you press the marker):