Skip to content

Instantly share code, notes, and snippets.

@maxim75

maxim75/gist:1069068

Created July 7, 2011 07:59
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 maxim75/1069068 to your computer and use it in GitHub Desktop.
Save maxim75/1069068 to your computer and use it in GitHub Desktop.
Download ZIP
Displaying GeoJSON data on Google Maps
Raw
gistfile1.html
<!DOCTYPE html>
<html>
<head>
<style>
#map_canvas {
width: 300px;
height: 300px;
}
</style>
<!-- Google Maps -->
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<!-- GeoJSON -->
<script type="text/javascript" src="https://raw.github.com/JasonSanford/GeoJSON-to-Google-Maps/master/GeoJSON.js"></script>
<!-- JQuery -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
</head>
<body>
<div id="map_canvas"></div>
<script>
var latlng = new google.maps.LatLng(50.3, 30.3);
var myOptions = {
zoom: 6,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var googleOptions = {
strokeColor: "#FF0000",
strokeWeight: 2,
strokeOpacity: 0.75
};
$.getJSON("http://api.simplegeo.com/1.0/features/SG_3h34p0h8HaB3oqMftundG7_50.289777_30.448048.json", function(data)
{
googleVector = new GeoJSON(data, googleOptions);
if(!googleVector.length)
googleVector.setMap(map);
else
for(var idx in googleVector)
googleVector[idx].setMap(map);
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment