Scribd Logo
Hochladen

Willkommen bei Scribd!

  • Howtousetheofflinegooglemapapitoloadofflinegooglemaps 140610212426 Phpapp02

    Hochgeladen von

    hemalatham06
    9 Ansichten8 Seiten
    How to use the offline google map api to load offline google maps

    Copyright

    © © All Rights Reserved

    Verfügbare Formate

    DOC, PDF, TXT oder online auf Scribd lesen

    Stufen Sie dieses Dokument als nützlich ein?

    Sind diese Inhalte unangemessen?

    Dieses Dokument melden
    How to use the offline google map api to load offline google maps

    Copyright:

    © All Rights Reserved
    Als DOC, PDF, TXT herunterladen oder online auf Scribd lesen
    Markieren Sie unangemessene Inhalte
    9 Ansichten8 Seiten

    Howtousetheofflinegooglemapapitoloadofflinegooglemaps 140610212426 Phpapp02

    Hochgeladen von

    hemalatham06
    How to use the offline google map api to load offline google maps

    Copyright:

    © All Rights Reserved
    Als DOC, PDF, TXT herunterladen oder online auf Scribd lesen
    Markieren Sie unangemessene Inhalte
    von 8

    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 Maps
    Step one:
    1. Download the sample data
    2. 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 deployment
    1. 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 three
    Copy 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.

    Das könnte Ihnen auch gefallen