Loading Markers via XML and adding Infobox using Google Maps API V3?How to integrate XML markers with...

Have any astronauts or cosmonauts died in space?

What really causes series inductance of capacitors?

1990s-2000s horror alien movie with slugs infecting people through the mouth

Why would you use 2 alternate layout buttons instead of 1, when only one can be selected at once

Sets that are both Sum-free and Product-free

Can someone explain European graduate programs in STEM fields?

Can someone explain what a key is?

What is an efficient way to digitize a family photo collection?

Why does a single AND gate need 60 transistors?

What is wrong with my use of "find -print0"?

Manager has noticed coworker's excessive breaks. Should I warn him?

How do I add a strong "onion flavor" to the biryani (in restaurant style)?

Does an enchantment ability that gives -1/-1 to opponent creatures resolve before other abilities can be used on a 1/1 entering the battlefield

Are all power cords made equal?

Is the UK legally prevented from having another referendum on Brexit?

How to deal with an underperforming subordinate?

How can I differentiate duration vs starting time

What does an unprocessed RAW file look like?

Does Plato's "Ring of Gyges" have a corrupting influence on its wearer?

Why is Shelob considered evil?

Can you say "leftside right"?

In a post apocalypse world, with no power and few survivors, would Satnav still work?

Is layered encryption more secure than long passwords?

Did ancient Germans take pride in leaving the land untouched?

Loading Markers via XML and adding Infobox using Google Maps API V3?

How to integrate XML markers with MarkerCluster?Unable to put data into infowindowGoogle Maps API and OpenLayersWhy is the Google Maps circle shape not matching to the distance calculated with PostgreSQL?Is the data supplied to Google Maps or leaflet.js javascript rest API is privateGoogle Maps API v2 and Maps engineGoogle Maps click event does not work on mobile devicesExtracting latitude/longitude from javascript and passing to html formText Label GeoJSON Markers Google Maps APIAdding association for location with city or zip code when using PostGIS to add markers using geography?

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>

edited Oct 9 '18 at 20:26

PolyGeo♦

53.6k1780240

asked Oct 9 '18 at 19:21

H H

bumped to the homepage by Community♦ 2 mins ago

This question has answers that may be good or bad; the system has marked it active so that they can be reviewed.

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

add a comment |

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.

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>

edited Oct 9 '18 at 20:26

PolyGeo♦

53.6k1780240

asked Oct 9 '18 at 19:21

H H

bumped to the homepage by Community♦ 2 mins ago

This question has answers that may be good or bad; the system has marked it active so that they can be reviewed.

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

add a comment |

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.

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>

edited Oct 9 '18 at 20:26

PolyGeo♦

53.6k1780240

asked Oct 9 '18 at 19:21

H H

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.

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>

google-maps-api xml

edited Oct 9 '18 at 20:26

PolyGeo♦

53.6k1780240

asked Oct 9 '18 at 19:21

H H

edited Oct 9 '18 at 20:26

PolyGeo♦

53.6k1780240

asked Oct 9 '18 at 19:21

H H

edited Oct 9 '18 at 20:26

PolyGeo♦

53.6k1780240

edited Oct 9 '18 at 20:26

PolyGeo♦

53.6k1780240

edited Oct 9 '18 at 20:26

PolyGeo♦

53.6k1780240

asked Oct 9 '18 at 19:21

H H

asked Oct 9 '18 at 19:21

H H

asked Oct 9 '18 at 19:21

H H

bumped to the homepage by Community♦ 2 mins ago

This question has answers that may be good or bad; the system has marked it active so that they can be reviewed.

bumped to the homepage by Community♦ 2 mins ago

This question has answers that may be good or bad; the system has marked it active so that they can be reviewed.

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

add a comment |

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

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

add a comment |

1 Answer
1

active

oldest

votes

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.

edited Oct 9 '18 at 20:26

PolyGeo♦

53.6k1780240

answered Oct 9 '18 at 20:00

H H

add a comment |

Your Answer

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "79"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: false,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: null,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fgis.stackexchange.com%2fquestions%2f298373%2floading-markers-via-xml-and-adding-infobox-using-google-maps-api-v3%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

1 Answer
1

active

oldest

votes

1 Answer
1

active

oldest

votes

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.

edited Oct 9 '18 at 20:26

PolyGeo♦

53.6k1780240

answered Oct 9 '18 at 20:00

H H

add a comment |

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.

edited Oct 9 '18 at 20:26

PolyGeo♦

53.6k1780240

answered Oct 9 '18 at 20:00

H H

add a comment |

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.

edited Oct 9 '18 at 20:26

PolyGeo♦

53.6k1780240

answered Oct 9 '18 at 20:00

H H

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.

edited Oct 9 '18 at 20:26

PolyGeo♦

53.6k1780240

answered Oct 9 '18 at 20:00

H H

edited Oct 9 '18 at 20:26

PolyGeo♦

53.6k1780240

edited Oct 9 '18 at 20:26

PolyGeo♦

53.6k1780240

edited Oct 9 '18 at 20:26

PolyGeo♦

53.6k1780240

answered Oct 9 '18 at 20:00

H H

answered Oct 9 '18 at 20:00

H H

answered Oct 9 '18 at 20:00

H H

add a comment |

draft saved

draft discarded

Thanks for contributing an answer to Geographic Information Systems Stack Exchange!

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Vjylku