Add a Cached Basemap Service to Google Maps

First Step: Create a Basemap with Google Maps

This example shows how to display a Google map inside a web page.

In an HTML or text editor, create a new web page or file. Create the page in a web server's folders, or in any location on the hard disk.

Paste or type the following content to create an outline for the HTML page:

</head>
<body>
...
</body>
</html>

Load the Google Maps API by adding the following line in the header section, just after the meta tag (see the complete code at the bottom of this page if unsure where it goes):

This line tells the page where to find the JavaScript file that includes all of the symbols and definitions needed for using the Google Maps API. It also includes a unique Google Maps API key. In this example the key is shown as “abcdefg.” Replace it with a unique key.

Inside the page body, add a div element that will contain the map. The width and height of the map are specified in the style attribute of the div:

In the head of the page, add a script block with a function to create the Google map:

function initialize() {
gmap = new GMap2(document.getElementById("gmap"));
var centerat = new GLatLng(38.897000, -77.02000);

gmap.addControl(new GLargeMapControl());
gmap.addControl(new GMapTypeControl());
gmap.setCenter(centerat, 11);
}
</script>

What's happening here?

The initialize function creates a map and connects it with the DIV tag created in the previous step.

The centerat variable is a GLatLng object. It's a way to specify a set of coordinates. In this case, the coordinate 38.897000, -77.02000 is where the code will center the map when it opens (Washington DC).

The function then does three things to the map. It adds a large map control (navigation buttons and a zoom level slider) and a map type control (buttons that allow you to switch between Map, Satellite, and Hybrid maps). It then centers the map on the coordinates named earlier, at zoom level 11.

Finally, in the body tag, tell the page what to do when it loads and unloads:

When the page loads, it should run the initialize function from the previous step. When the page unloads, it should call GUnload. This is a Google Maps function designed to prevent memory leaks.

Save the page and load it into a browser (double-click on the file in a browser, or access it through the web server's URL). The Google map is centered and zoomed at the location specified.

Second Step: Add a Cached Basemap to Google Maps as a Map-Type Button

Google Maps provides buttons for switching between different map types. This example shows how to add a button that switches to an ArcGIS Server map type. The ArcGIS Server map overlays a satellite map background from Google.

The example uses an ArcGIS Server cached map service (represented by TiledMapServiceLayer). Only cached services can be used as a map type. To discover if a service has a cache, use the Services Directory.

When adding cached map services, use the MapExtension class which helps manage the addition and removal of cached services, results, and features from the map.

When the tiled map service is created in this example, three arguments are passed to the constructor: The URL to the map service (use the Services Directory to find out the URL to the map services), some map options that were defined one line above, and the name of a callback function (addTiledMap) that executes once the map is done loading.

The callback function addTiledMap does three things:

Creates a GMapType which is visible on the map as a button that says “ArcGIS”. The variable tilelayers includes the layers that will be visible when someone clicks this button, namely the satellite map layer and the ArcGIS layer. Note that tilelayers is the first argument passed to the constructor for the GMapType. To learn more about creating a map type, see the Google Maps API reference for GMapType.
Removes other map types, or buttons, from the map. It leaves only the normal map and the ArcGIS map.
Adds controls for navigating the map and centers the map at a given point and zoom level.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<title>TiledMapService with GMapType</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<script src="http://maps.google.com/maps?file=api&v=2&key=DioG219lPJG3WTn3zmQqebsjVg" type="text/javascript"></script>
<script src="http://serverapi.arcgisonline.com/jsapi/gmaps/?v=1.4" type="text/javascript" ></script>

function initialize() {

//Load Google Maps
gmap = new GMap2(document.getElementById("gmap"));

//create mapextension class to be used to add/remove results from the map.
mapExtension = new esri.arcgis.gmaps.MapExtension(gmap);

//create mapOptions to specify opacity, minResolution, maxResolution when adding to the map.
var mapOptions = {opacity: 0.75, minResolution:0, maxResolution: 19};

//create custom tile layer
var tiledmap = new esri.arcgis.gmaps.TiledMapServiceLayer("http://maps.dcgis.dc.gov/DCGIS/rest/services/Basemap-WebMercator/MapServer", mapOptions, addTiledMap);
}

function addTiledMap(gTileLayer) {
var centerat = new GLatLng(38.897000, -77.02000);

//Add tile layer as a new GMapType
var tilelayers = [G_SATELLITE_MAP.getTileLayers()[0],gTileLayer];
var gMapType = new GMapType(tilelayers, new GMercatorProjection(20), "ArcGIS", {errorMessage:"No data available"});
gmap.addMapType(gMapType);
gmap.removeMapType(G_NORMAL_MAP);
gmap.removeMapType(G_HYBRID_MAP);
gmap.removeMapType(G_SATELLITE_MAP);
gmap.addMapType(G_NORMAL_MAP);

gmap.addControl(new GLargeMapControl());
gmap.addControl(new GMapTypeControl());
gmap.setCenter(centerat, 11);
gmap.enableScrollWheelZoom();
}

</script>

</head>
<body onload="initialize();" onunload="GUnload();">
<table width="100%" height="100%">
<tr>
<td align="center">
<table>
<tr align="left" valign="top">
<td>
<div id="gmap" style="width: 500px; height:500px;"></div>
</td>
</tr>
</table>

</td>
</tr>
</table>
</body>
</html>

octo

Office of the Chief Technology Officer

DC Agency Top Menu

Search form

Office of the Chief Technology Officer

Add a Cached Basemap Service to Google Maps

First Step: Create a Basemap with Google Maps

Paste or type the following content to create an outline for the HTML page:

Load the Google Maps API by adding the following line in the header section, just after the meta tag (see the complete code at the bottom of this page if unsure where it goes):

Inside the page body, add a div element that will contain the map. The width and height of the map are specified in the style attribute of the div:

In the head of the page, add a script block with a function to create the Google map:

What's happening here?

Finally, in the body tag, tell the page what to do when it loads and unloads:

Second Step: Add a Cached Basemap to Google Maps as a Map-Type Button

The callback function addTiledMap does three things:

DC Agency Top Menu

document.write(document.getElementById("site-slogan").innerHTML);

Add a Cached Basemap Service to Google Maps

First Step: Create a Basemap with Google Maps

Paste or type the following content to create an outline for the HTML page:

Load the Google Maps API by adding the following line in the header section, just after the meta tag (see the complete code at the bottom of this page if unsure where it goes):

Inside the page body, add a div element that will contain the map. The width and height of the map are specified in the style attribute of the div:

In the head of the page, add a script block with a function to create the Google map:

What's happening here?

Finally, in the body tag, tell the page what to do when it loads and unloads:

Second Step: Add a Cached Basemap to Google Maps as a Map-Type Button

The callback function addTiledMap does three things: