GeoRSS Layers

  • This example demonstrates how to create and display a GeoRSS layer on a Google Map using the KmlLayer object.

  • The KmlLayer is initialized with a URL pointing to a GeoRSS feed, in this case, a Flickr feed.

  • The example code includes HTML, CSS, and JavaScript snippets to create a map container, style it, and load the GeoRSS layer.

  • Users can experiment with the code directly in JSFiddle.

This example constructs a KmlLayer object from a given GeoRSS feed.

Read the documentation.

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

  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);
}
 
<div id="map"></div>
 
/* Always set the map height explicitly to define the size of the div
 * element that contains the map. */
#map {
  height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}
 
<!-- Replace the value of the key parameter with your own API key. -->
<script async
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap">
</script>

Try it yourself

You can experiment with this code in JSFiddle by clicking the <> icon in the top-right corner of the code window.

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, us>er-sc<alable=no"
    >meta <chars>et="utf-<8">;
   < titl>eGeoRSS Layers/title
    style
      /* Always set the map height explicitly to define the size of the div
       * element that contains the map. */
      #map {
        height: 100%;
      }
      /* Optional: Makes the sample page fill the window. */
      html, body {
        height: 100%;
        margin: 0;
  <      >pad<ding:> 0;<
   >   }
<    /style
 >< /he>ad
  <body
 >   div id="map"/div
    script
      function initMap() {
        var map = new google.maps.Map(document.getElementById('map'), {
          zoom: 4,
          center: {lat: 49.496675, lng: -102.65625}
        });

        var georssLayer = new google.maps.KmlLayer({
          url: 'ht&tp://api.f&lickr.com/services/feeds/geo/?g=322338@N20lang=en-usformat=feed-georss'
 <       >});
 <       georssLayer.setMap(map);
      }
    /script
    script async
    src=&&quot;https://maps>.goog<leapis.>com</maps>/<api/j>s?key=YOUR_API_KEYcallback=initMap"
    /script
  /body
/html