How to Read XML Files with the Google Maps API

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.

  1. 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
    <!DOCTYPE html>
    <html lang="en">
    	<meta charset="UTF-8">
    	<title>A Basic Map</title>
    		#map {
    			height: 100%;
    		/* Optional: Makes the sample page fill the window. */
    		html, body {
    			height: 100%;
    			margin: 0;
    			padding: 0;
    	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);
    <div id="map"></div>
    <script async defer
  3. 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=""></script>
  5. 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.
    	<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" />
  7. 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.
    	type: "GET",
    	async: true,
    	url: "falls.xml",
    	dataType: "xml",
    	function (xml) {
  9. Inside the callback function, create an array of places from the XML data.
    var places = xml.documentElement.getElementsByTagName("place");
  11. 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,
  13. Open your web page in a browser to see the results.
    XML data loaded into markers
Author: Chris Minnick

Chris Minnick, the co-founder of WatzThis?, has overseen the development of hundreds of web and mobile projects for customers from small businesses to some of the world’s largest companies. A prolific writer, Chris has authored and co-authored books and articles on a wide range of Internet-related topics including HTML, CSS, mobile apps, e-commerce, e-business, Web design, XML, and application servers. His published books include Adventures in Coding, JavaScript For Kids For Dummies, Writing Computer Code, Coding with JavaScript For Dummies, Beginning HTML5 and CSS3 For Dummies, Webkit For Dummies, CIW E-Commerce Designer Certification Bible, and XHTML.

About Webucator

Webucator provides instructor-led training to students throughout the US and Canada. We have trained over 90,000 students from over 16,000 organizations on technologies such as Microsoft ASP.NET, Microsoft Office, Azure, Windows, Java, Adobe, Python, SQL, JavaScript, Angular and much more. Check out our complete course catalog.