GoogleMap localization (offline)

Turn from:

http://cjnetwork.iteye.com/blog/1485328

In web development, you might encounter the need for a map system to choose Google Map to complete the map, but the web system is not allowed to link with the Internet because of its particularity, and there is now more and more unstable access to Google (National network restrictions), So you want to port Google map to the intranet.
The Google Map API can be divided into 3 parts to look at:
1, responsible for interacting with the server JS file
2, Google provides technical support, such as find the path, the surrounding search
3. Map data provided by Google

If you need to develop features that include the 2nd part of the requirements, it can be more complex. Because the path algorithm is implemented on Google servers, it only provides an external interface, which is not possible if the Internet connection is not available.
But if the development of the web in the use of the map is relatively simple, such as just loading maps, there is a simple map movement and other functions, then the need for Google Map can be ported to the intranet to deal with. This approach also applies to custom perimeter searches, such as Web functionality that needs to be done by querying, acquiring a specified range of buildings, obtaining custom tags (when developing a local merchant search system, the maintenance of the merchant data on the map must be maintained by the web itself, not the data provided by Google, This is just the right scenario).

Here's how to localize Google Maps into two steps:
1. Localize the JS file that Google Maps uses to interact with the server
This is of course according to Google Map loading time, the required JS download to the local, later when the application development, do not refer to the Google site JS, but instead of the local JS file. Specific what JS need to download, here do not do a detailed introduction, you can use the Firefox firebug plugin, or Google Chrome and other tools to view the HTTP request, analysis and download a valid JS file, may also need to analyze each JS in the use of the process of loading the external link JS address, and to modify and replace the call to the local JS. The Google Map API needs to use the JS localization, the network on a friend called Rover.tang has done very well, provided the Google Map API v3.8 localization JS, can be found on the network.
2. Download map data from Google Maps (tiles: tiles) to local, and application development
When it comes to map data, you need to know a little bit about Google Map's basics. Google divides the map displayed in the browser into a piece of picture, called Tile, in which the part of the map is viewed, the tiles are downloaded from Google, and then stitched together to see a complete map. Each tile size is a PNG image of 256*256, because there is zoom (zoom level 0-19), in each zoom level, the area of the map displayed in the browser is divided into tiles, each tile will download the corresponding map data according to the Google site, is actually a PNG image, in the browser request to obtain tile map image data, will be passed to Google three important parameters, 1, tile x coordinate, 2, tile y coordinate; 3. The zoom level of the map displayed in the current browser.
Google Maps can customize the map type (Maptype), detailed can refer to Https://developers.google.com/maps/documentation/javascript/maptypes
Let's talk about how to load a map by customizing it (map data localization)
Java code  //JS code    <script type= "Text/javascript" >   var map;   VAR&NBSP;MYCENTER&NBSP;=&NBSP;NEW&NBSP;GOOGLE.MAPS.LATLNG (29.568381,106.552219);//Chongqing      Function coordmaptype ()  {  }   coordmaptype.prototype.tilesize = new  google.maps.size (256,256);   coordmaptype.prototype.maxzoom = 19;   Coordmaptype.prototype.gettile = function (coord, zoom, ownerdocument)  {     var div = ownerdocument.createelement (' div ');     div.innerHTML  =  ' ';      //div.innerHTML =  ' ';       div.style.width = this.tileSize.width +  ' px ';     div.style.height = this.tileSize.height +  ' px ';      div.style.fontsize =  ';     div.style.borderStyle =  ' solid ';      div.style.borderWidth =  ' 1px ';     div.style.bordercolor =   ' #AAAAAA ';     return div;  };      var  Coordinatemaptype = new coordmaptype ();      function initialize ()   {     var mapOptions = {       zoom: 10,        center: myCenter,       mapTypeId:  "Coordinate"      };     map = new google.maps.map ( Document.getelementbyiD ("Map_canvas"), mapoptions);     map.maptypes.set (' coordinate ', coordinatemaptype);   }   Google.setonloadcallback (Initialize);   </script>     // HTML code    <div id= "Map_canvas" ></div>  

JS code <script type= "Text/javascript" > var map; var mycenter = new Google.maps.LatLng (29.568381,106.552219);//Chongqing function Coordmaptype () {} CoordMapType.prototype.til
Esize = new Google.maps.Size (256,256);
CoordMapType.prototype.maxZoom = 19;
  CoordMapType.prototype.getTile = function (coord, zoom, ownerdocument) {var div = ownerdocument.createelement (' div ');
  div.innerhtml = '  ';
  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;

};

var coordinatemaptype = new Coordmaptype ();
  function Initialize () {var mapoptions = {zoom:10, center:mycenter, Maptypeid: "Coordinate"}; Map= New Google.maps.Map (document.getElementById ("Map_canvas"), mapoptions);
Map.mapTypes.set (' coordinate ', coordinatemaptype);
} google.setonloadcallback (Initialize);
 </script>//html code <div id= "Map_canvas" ></div>

The

Focus is code div.innerhtml = '
When this is done, Google Maps data is downloaded, and Google Maps moves through the online Google map to see a location like this Http://mt0.googleapis.com/vt?src=apiv3 &x=814&y=423&z=10 download map data, x is the x-coordinate of the tile, y is the y-coordinate of the tile, and z is the zoom level. So use any of the development language, or script, to Google's server to download the corresponding area of the map data to be stored locally. Java Implementation Network Download of course there are a lot of things to use, this is free to play. :) googlemap offline. zip (710.1 KB) Download count: 2175