ArcGIS server - Google Map API
Overlay ArcGIS server Published Shape file on Google Maps
For beginners its really difficult to get things started i.e. How to overlay shape file on web mapping application using Google Map Api and ArcGIS server.
I assume you have published a shape file on ArcGIS server and You know a little bit about Google maps Api and if you dont know here you can learn this
Google Map Api (Basics)
Now, First Open Note Pad ++ and make a basic html page containing a div and name it map_canvas
<!DOCTYPE html>
<html>
<head>
<title> ArcGIS Server - Google Map Api </title>
</head>
<body>
<div id="map_canvas" style="width:1000px;height:600px;"></div>
</body>
</html>
Now add two links
<!DOCTYPE html>
<html>
<head>
<title> ArcGIS Server - Google Map Api </title>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
<script type="text/javascript" SRC="arcgislink.js"></script>
</head>
<body>
<div id="map_canvas" style="width:1000px;height:600px;"></div>
</body>
</html>
the first one is for adding Google Map api and the second one is for adding arcgis server library that you can find detail information here Open it and copy it and save it as arcgislink.js
Now, write this script
<!DOCTYPE html>
<html>
<head>
<title> ArcGIS Server - Google Map Api </title>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
<script type="text/javascript" SRC="arcgislink.js"></script>
<script type="text/javascript">
var dynamap;
function init()
{
var mapprop = {
center : new google.maps.LatLng (33.716786,73.068171),
zoom : 14,
mapTypeId : google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"),mapprop);
var url = 'http://localhost:6080/arcgis/rest/services/Test_Service/MapServer';
var dynamap = new gmaps.ags.MapOverlay(url);
dynamap.setMap(map);
}
google.maps.event.addDomListener(window, 'load', init);
</script>
</head>
<body>
<div id="map_canvas" style="width:1000px;height:600px;"></div>
</body>
</html>
Save it as index.html and Open it in browser You'll see a google map with your shapefile overlayed on it .
