Places UI Kit: A ready-to-use library that provides room for customization and low-code development. Try it out, and share your input on your UI Kit experience.

GeoRSS Layers

Spark icon

Page Summary

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.

<!DOCTYPEhtml>
<html>
<head>
<metaname="viewport"content="initial-scale=1.0, user-scalable=no">
<metacharset="utf-8">
<title>GeoRSSLayers</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;
padding:0;
}
</style>
</head>
<body>
<divid="map"></div>
<script>
functioninitMap(){
varmap=newgoogle.maps.Map(document.getElementById('map'),{
zoom:4,
center:{lat:49.496675,lng:-102.65625}
});
vargeorssLayer=newgoogle.maps.KmlLayer({
url:'http://api.flickr.com/services/feeds/geo/?g=322338@N20&lang=en-us&format=feed-georss'
});
georssLayer.setMap(map);
}
</script>
<scriptasync
src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
</script>
</body>
</html>

GeoRSS Layers Stay organized with collections Save and categorize content based on your preferences.

Page Summary

Try it yourself

GeoRSS Layers