Skip to content
Products
Solutions
By industry
By use case
Resources
Products
Solutions
By industry
By use case
Resources
Products
Solutions
By industry
By use case
Resources
Quick Map Layer Visualizations with GeoJSON and GeoRSS
Travis McPhail
Engineering Lead, Google Maps Platform
Nov 15, 2019
Try Google Maps Platform
Unlock access to real-world data and insights with a monthly $200 Google Maps Platform credit.
Get started

Being able to visualize data is often crucial to understanding it completely–and this is especially true for geo data. To help with this, Google Maps Platform enables you to add markers, lines, and shapes to a map programmatically. Depending on your purpose, whether you want to share or store the data, and the source of your data, working with specific formats can make the job easier. Today we’ll look at two different formats that you can easily add to Google Maps Platform projects for quick map layer visualizations: GeoJSON and GeoRSS.

**GeoJSON, a JavaScript-friendly format**We’ll start with the most flexible of the data formats, which can be called either inline or loaded from a URL. JavaScript developers may already be familiar with JavaScript Object Notation (JSON), a standard that is easily evaluated by JavaScript and other modern languages. GeoJSON uses JSON to encode geographic data structures and has become a popular way to share locations. 

Here’s an example GeoJSON file with a single location:

{
  "type": "Feature",
  "geometry": {
    "type": "Point",
    "coordinates": [-75.15065, 39.94897]
  },
  "properties": {
    "name": "Congress Hall"
  }
}
Copied to clipboard!

This describes the location of an early capitol building: Congress Hall in Philadelphia, Pennsylvania.

Google Maps UI of the United States with a pin in Philadelphia.

Google Maps Platform supports GeoJSON data with a single function call. Other formats in this post will need to reference public URLs, but with GeoJSON we can reference the object right in our JavaScript–an external file is optional. Then we can reference it with the addGeoJson function.

Here’s our Google Maps JavaScript code, including the embedded GeoJSON object:

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 4,
    center: {lat: 40, lng: -100}
  });
  
  var tempObject = 
  {
    "type": "Feature",
    "geometry": {
      "type": "Point",
      "coordinates": [-75.15065, 39.94897]
    },
    "properties": {
      "name": "Congress Hall"
    }
  }

  map.data.addGeoJson(tempObject);
}
Copied to clipboard!

Alternatively, you can load an external file using loadGeoJson and include it in the map as a Data Layer. For more on this approach to GeoJSON, see the Data Layer documentation.

**GeoRSS, derived from syndication format RSS**You may want to add geographic data to an existing content feed. GeoRSS is the right choice, as it’s a data format designed to work with RSS feeds. For example, a travel blog could include geotagged places with every post, which could then be added to a map. The GeoRSS feed could also be standalone and not delivered with other content.

There are two versions: GeoRSS-simple and GeoRSS GML. GeoRSS-simple is designed to be really quick and straightforward, great for most Google Maps Platform use cases, and is the format you’ll probably use most often. But for more on GeoRSS GML, especially if working with different coordinate systems, see the GeoRSS site

You can make a point with GeoRSS-simple like so:

<georss:point>40.70739, -74.0102</georss:point>

In this example, the data represents the location of another early US capitol building: Federal Hall in New York City. 

GeoRSS files can be added to your Google Maps Platform projects with the same JavaScript function we used with KML. In this case, you’ll need to provide a publicly-accessible URL for a GeoRSS feed:

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 4,
    center: {lat: 40, lng: -100}
  });

  var georssLayer = new google.maps.KmlLayer({
    url: 'http://api.flickr.com/services/feeds/geo/?g=322338@N20&lang=en-us&format=feed-georss'
  });
  georssLayer.setMap(map);
}
Copied to clipboard!

When you load this map, you’ll see markers read in from the Flickr GeoRSS file.

A Map UI of North America showing how markers are read in from the Flickr GeoRSS file.

You can continue adding markers and other overlays to your Google maps using the built-in objects in the Maps JavaScript API. In situations where you have a lot of data at once, especially from an external source, it may make sense to use one of these common geographic data formats. Whether you like the portability of GeoJSON or the feed-interactivity of GeoRSS, you can easily add them as a visualization layer to your Google Maps. 

For more information on Google Maps Platform, visit our website.

Clay cityscape
Clay cityscape
Google Maps Platform
Get going with Google Maps Platform