How to Read XML Files with the Google Maps API
See XML: Tips and Tricks for similar articles.If you have an XML document containing locations that you want to display on a map, you can load this XML file and display each location as a marker in Google Maps. Here's how:
Before you can use Google Maps in your own application, you'll need to get an API key. An API key is a unique series of numbers and letters that a web service provider (such as Google) can use to keep track of who is using their services. Google Maps API keys are free, and use of Google Maps is free for developers.
- Start with the following basic Google Map. Make sure to replace
YOUR_API_KEY
in thescript
tag with your API key that you got from https://developers.google.com/maps. - Use a script tag in the
head
element to include the jQuery library. We'll use jQuery to simplify the process of opening and reading the XML file. - Create an XML file containing the latitude and longitude of places you want to display as markers and save the file with the extension .xml.
- Inside the
initMap()
function, after thevar map =
statement, use jQuery to load the.xml
file. Pass the xml data into the success callback function. - Inside the callback function, create an array of places from the XML data.
- Loop through each marker and add it to the map.
- Open your web page in a browser to see the results.
<!DOCTYPE html>
<html lang="en">
<head>
<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>
<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);
}
</script>
</head>
<body>
<div id="map"></div>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
</script>
</body>
</html>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<root>
<place name="Niagra Falls" latitude="43.0962" longitude="-79.0377" />
<place name="Yosemite Falls" latitude="37.7566" longitude="-119.5969" />
<place name="Multnomah Falls" latitude="45.5762" longitude="-122.1158" />
<place name="Snoqualmie Falls" latitude="47.5417" longitude="-121.8377" />
</root>
$.ajax({
type: "GET",
async: true,
url: "falls.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 latLng = new google.maps.LatLng(lat, long);
var marker = new google.maps.Marker({
position: latLng,
map: map,
label:places[i].name
});
}
Related Articles
- How to Try XMLSpy for Free
- How to Send and Receive XML Data to and from the Server
- How to Dynamically Populate an HTML Table with XML Data
- How to Read XML Files with the Google Maps API (this article)
- How to Create XML Serialization in .NET