Help with google maps and bootstrap modals

0

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">&times;</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):

    
asked by Ignacio Fuentes 28.10.2018 в 02:38
source

0 answers