0

I'm having a couple of issues that I can't seem to resolve so I'm going to throw this out there to the community.

I'm trying to create a Google Map that loads markers based off an existing XML file (I have that working). The issue I'm currently having is when the user clicks one of the Markers I would like the info window to show a "Category". Currently I can only get the Name, Lat, Lng to show up. When I try to show the category I get the info window but with no information.

The second issue I'm having is that it appears the Info Window is only working on one of my markers.

You can find an example of the map here:

http://www.officerage.com/maps/index.html

The example XML file that I'm using is located here:

http://www.officerage.com/maps/testxml.xml

Here is a copy of my code:

   <!DOCTYPE html>
<html lang="en">
<head>

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <meta charset="UTF-8">
    <title>A Basic Map</title>
    <style>
        #map {
            height: 100%;
        }
        /* Optional: Makes the sample page fill the window. */
        html, body {
            height: 100%;
            margin: 0;
            padding: 0;
        }
    </style>

    </head>

    <body>
    <div id="map"></div>
    <script>


    function initMap() {
        var mapOptions = {
            zoom: 3,
            center: new google.maps.LatLng(37.5, -122),
            mapTypeId: 'roadmap'
        };


        var map = new google.maps.Map(document.getElementById('map'), mapOptions);





        $.ajax({
    type: "GET",
    async: true,
    url: "testxml.xml",
    dataType: "xml",
    success:
    function (xml) {


        var places = xml.documentElement.getElementsByTagName("place");


    for (var i = 0; i < places.length; i++) {
    var lat = places[i].getAttribute('latitude');
    var long = places[i].getAttribute('longitude');
    var category = places[i].getAttribute('Info');
    var latLng = new google.maps.LatLng(lat, long);
    var marker = new google.maps.Marker({
        position:  latLng,
        map: map,
        category:places[i].info,
        label:places[i].name




    });



}
     var infowindow = new google.maps.InfoWindow({
          content: category
        });


        marker.addListener('click', function() {
          infowindow.open(map, marker);
        });

    }



}


);

    }
    </script>


<script async defer
        src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCz_-TAwsP-dL_dsEkmz8sGEU1hyPYKHik&callback=initMap">
</script>
</body>
</html>
  • Thanks for posting your solution! Very helpful as I was stuck on the same issue. Have you figured out how to pull in addresses from the xml instead of longitude/latitude? – SRouse Jan 24 at 15:01
  • Please don't add "thank you" as an answer. Once you have sufficient reputation, you will be able to vote up questions and answers that you found helpful. - From Review – Mark Ireland Jan 24 at 15:22
0

So I got multiple info windows showing up, and I was able to get my "Category" to show up.

I was missing the following line of code: I never created the infoCallback function

function infoCallback(infowindow, marker) { return function() { infowindow.open(map, marker); }; (I have updated the code on the officerage.com website)

Now I'm having an issues with the InfoBox closing when clicking another marker. The user will have click the X to close the current InfoBox.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.