-
-
Save hassanuos/927e56ea97ae293c1926519b3490e700 to your computer and use it in GitHub Desktop.
Draw markers and circles on a map using Google Maps API and jQuery
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" | |
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> | |
<html> | |
<head> | |
<meta http-equiv="content-type" content="text/html; charset=utf-8" /> | |
<title>Items Map</title> | |
<script type="text/javascript" | |
src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"> | |
</script> | |
<script type="text/javascript" | |
src="http://maps.google.com/maps/api/js?sensor=false"> | |
</script> | |
<script type="text/javascript"> | |
// http://articles.sitepoint.com/article/google-maps-api-jquery | |
var ItemMap = { | |
bounds: null, | |
map: null | |
} | |
ItemMap.init = function(selector, center, zoom) { | |
var map_options = { | |
zoom: zoom, | |
center: center, | |
mapTypeId: google.maps.MapTypeId.ROADMAP | |
} | |
this.map = new google.maps.Map($(selector)[0], map_options); | |
this.bounds = new google.maps.LatLngBounds(); | |
} | |
ItemMap.draw = function(filename) { | |
$.get(filename, function(xml) { | |
$(xml).find('item').each(function() { | |
var title = $(this).find('title').text(); | |
// Create a new LatLng point | |
var lat = $(this).find('lat').text(); | |
var lon = $(this).find('lon').text(); | |
var point = new google.maps.LatLng( | |
parseFloat(lat), | |
parseFloat(lon) | |
); | |
// Extend the bounds to include the new point | |
ItemMap.bounds.extend(point); | |
// Add the marker itself | |
var marker = new google.maps.Marker({ | |
position: point, | |
map: ItemMap.map | |
}); | |
var circle = new google.maps.Circle({ | |
radius: 70*1000, | |
center: point, | |
map: ItemMap.map, | |
fillColor: '#FF0000', | |
fillOpacity: 0.2, | |
strokeColor: '#FF0000', | |
strokeOpacity: 0.6 | |
}); | |
// Create the tooltip and its text | |
var infoWindow = new google.maps.InfoWindow(); | |
var html = title; | |
// Add a listener | |
google.maps.event.addListener(marker, 'click', function() { | |
infoWindow.setContent(html); | |
infoWindow.open(ItemMap.map, marker); | |
}); | |
google.maps.event.addListener(circle, 'click', function() { | |
infoWindow.setContent(html); | |
infoWindow.open(ItemMap.map, circle); | |
}); | |
}); | |
// Fit the map around the markers we added: | |
ItemMap.map.fitBounds(ItemMap.bounds); | |
}); | |
} | |
$(document).ready(function() { | |
var center = new google.maps.LatLng(46.3, 3); | |
ItemMap.init('#map', center, 6); | |
ItemMap.draw('data.xml'); | |
}); | |
</script> | |
</head> | |
<body> | |
<div id="map" style="width: 800px; height: 600px"></div> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment