Skip to content

Instantly share code, notes, and snippets.

@toddstowell

toddstowell/google-map-with-georss-and-search.html

Created August 2, 2013 00:19
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save toddstowell/6136546 to your computer and use it in GitHub Desktop.
Save toddstowell/6136546 to your computer and use it in GitHub Desktop.
Download ZIP
A simple way to map static or dynamically generated GeoRSS data and add an auto-fill search to a custom Google Map using API v3. Note: You can play around with the width and height of the box, but you'll need to also adjust the inline css for the search box. This is delivered this way to show the proof of concept.
Raw
google-map-with-georss-and-search.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta charset="utf-8" />
<style type="text/css">
#panel {
position: absolute;
top: 10px;
margin-left: 80px;
z-index: 5;
background-color: #fff;
padding: 5px;
border: 1px solid #999;
}
#target { width: 345px; }
</style>
<script src="https://maps.googleapis.com/maps/api/js?v=3&key=YOUR-API-KEY&sensor=false&libraries=places" type="text/javascript"></script>
<script type="text/javascript">
function initialize() {
var map = new google.maps.Map(document.getElementById('map_canvas'), {
mapTypeId: google.maps.MapTypeId.ROADMAP,
zoom: 5
});
var defaultBounds = new google.maps.LatLngBounds(
new google.maps.LatLng(40.496675,-106.65625));
map.fitBounds(defaultBounds);
var input = /** @type {HTMLInputElement} */(document.getElementById('target'));
var searchBox = new google.maps.places.SearchBox(input);
var markers = [];
google.maps.event.addListener(searchBox, 'places_changed', function() {
var places = searchBox.getPlaces();
for (var i = 0, marker; marker = markers[i]; i++) {
marker.setMap(null);
}
markers = [];
var bounds = new google.maps.LatLngBounds();
for (var i = 0, place; place = places[i]; i++) {
var image = {
url: place.icon,
size: new google.maps.Size(71, 71),
origin: new google.maps.Point(0, 0),
anchor: new google.maps.Point(17, 34),
scaledSize: new google.maps.Size(25, 25)
};
var marker = new google.maps.Marker({
map: map,
icon: image,
title: place.name,
position: place.geometry.location
});
markers.push(marker);
bounds.extend(place.geometry.location);
}
map.fitBounds(bounds);
map.setZoom(7);
});
google.maps.event.addListener(map, 'bounds_changed', function() {
var bounds = map.getBounds();
searchBox.setBounds(bounds);
});
var georssLayer = new google.maps.KmlLayer({
url: '/path/to/your/map-data.rss'
});
georssLayer.setMap(map);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
<!-- BEGIN SAMPLE RSS STRUCTURE -->
<!--<?xml version="1.0" encoding="utf-8" standalone="yes"?>
<feed xmlns="http://www.w3.org/2005/Atom"
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:geo="http://www.w3.org/2003/01/geo/wgs84_pos#"
xmlns:georss="http://www.georss.org/georss"
xmlns:media="http://search.yahoo.com/mrss/">
<title>Feed Title</title>
<entry>
<title>Entry Title</title>
<content type="html"><![CDATA[YOU CAN INCLUDE HTML IN HERE, BUT MAKE SURE YOU ENCODE (EG. & = &amp; ]]></content>
<geo:long>LONGITUDE_ENTRY</geo:long>
<geo:lat>LATITUDE_ENTRY</geo:lat>
<georss:point>LATITUDE_ENTRY LONGITUDE_ENTRY</georss:point>
</entry>
</feed>-->
<!-- END SAMPLE RSS STRUCTURE -->
</head>
<body>
<div id="panel">
<input id="target" type="text" placeholder="Enter your address to search below!" />
</div>
<div id="map_canvas" style="width:592px; height: 450px;"></div>
</body>
</html>
@toddstowell
Copy link
Author

Make sure to look for and replace the following fields:

  • YOUR-API-KEY
  • /path/to/your/map-data.rss

Also, I can't stress enough that you need to encode your HTML output or it will not render the map. &=no &=yes.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment