Embed Size (px)
DESCRIPTION
Did you try many times to download map? This time I would like to introduce a good way for you to use the offline Google Map API to load offline Google Maps, Keep reading!
Citation preview
How to Use the Offline Google Map API to Load Offline
Google Maps
The Method to Use the Google Map API to Load Offline Google MapsStep one:1. Download the sample data2. Here we take the Maps Downloader For Google Satellite for example to show you the way to download Google Satellite Map.3. After install the Maps Downloader For Google Satellite, launch it , as shown below.
Because we just to make demo to show how to use the Google Map offline API to load Google Maps, therefore we only need to select “ New York” region. Then click " Select Region" on the toolbar, and draw the scope, as you can see the following picture.
Double-click the left mouse button in the scope you choose, display the New Task dialog box in which we can select 3-7 level or any level you want to downloaded. As it shown in the following picture.
Click the "OK" button to start downloading satellite map data.After complete exporting data, select export type "Google Map", save it to the "D: \ Test" directory, as shown below.
Click the "Output" button to export Google Map, as shown below.
Step two:Map engine deployment1. Download the "GoogleMapAPIV3.rar" and then extract it to the "D: \ Test" directory.
2. Rename the "New York _Google Map Tiles" which in the "D: \ Test" directory as "data"’
Step threeCopy the code below and save it as html files (such as "Example_GoogleMapAPI.html"), put it to "D: \ Test \ GoogleMapAPIV3" directory.
<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Google Maps JavaScript API v3 Example: Image MapTypes</title><link href="mapfiles/css/default.css" rel="stylesheet" type="text/css" /><script type="text/javascript" src="mapapi.js"></script><script> function tlen(len, mystr){
mystr = String(mystr);var num = len - mystr.length;for (var i = 0; i <= num; i++){
mystr = "0" + mystr;}return mystr;};
function CoordMapType(tileSize) { this.tileSize = tileSize; } CoordMapType.prototype.getTile = function(coord, zoom, ownerDocument) { var div = ownerDocument.createElement('DIV'); var ymax = 1 << zoom;
var y = coord.y;y = tlen(5,y);var x = tlen(5,coord.x);zoom = tlen(1,zoom);
div.innerHTML = y + "," + x + "," + zoom; div.style.width = this.tileSize.width + 'px'; div.style.height = this.tileSize.height + 'px'; div.style.fontSize = '10'; div.style.borderStyle = 'solid'; div.style.borderWidth = '1px'; div.style.borderColor = '#AAAAAA'; return div; };
function LocalMapType() {} LocalMapType.prototype.tileSize = new google.maps.Size(256, 256); LocalMapType.prototype.maxZoom = 20; LocalMapType.prototype.minZoom = 1; LocalMapType.prototype.name = "Local"; LocalMapType.prototype.alt = "Local Map"; LocalMapType.prototype.getTile = function(coord, zoom, ownerDocument) {
var img = ownerDocument.createElement("img");img.style.width = this.tileSize.width + "px";img.style.height = this.tileSize.height + "px";
var ymax = 1 << zoom;var y = coord.y;y = tlen(5,y);var x = tlen(5,coord.x);zoom = tlen(1,zoom);
var strURL = "..\\data\\L" + zoom + "\\" + y + "-" + x + ".jpg";
img.src = strURL;return img;
};
var localMapType = new LocalMapType(); function initialize() { var myLatlng = new google.maps.LatLng(0, 0); var myOptions = { center: myLatlng, zoom: 1, streetViewControl: false, mapTypeControlOptions: { mapTypeIds: [] } }; var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); //map.setMapTypeId('satellite'); //map.MapTypes.insertAt(0, moonMapType); map.mapTypes.set('local', localMapType); map.setMapTypeId('local'); map.overlayMapTypes.insertAt(0, new CoordMapType(new google.maps.Size(256, 256))); } </script></head><body onLoad="initialize()"> <div id="map_canvas" style="width: 640px; height: 480px;"></div></body></html>Then open the "D: \ Test \ GoogleMapAPIV3 \ Example_GoogleMapAPI.html" in your Brower, if you do it correctly it will display the offline satellite map, as shown below.
The information above is the practical way to use the Google Map API to load offline Google maps, you can make further development on "D: \ Test \ GoogleMapAPIV3 \ Example_GoogleMapAPI.html" file.
You can download it for a free trial.
