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 the script tag with your API key that you got from https://developers.google.com/maps.


<!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>

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.


<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>

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.


<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>

Inside the initMap() function, after the var map = statement, use jQuery to load the .xml file. Pass the xml data into the success callback function.


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

	}
});

Inside the callback function, create an array of places from the XML data.


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

Loop through each marker and add it to the map.


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
	});
}

Open your web page in a browser to see the results.

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

How to Read XML Files with the Google Maps API

Related Articles