Home > Developer > JavaScript
Google says the map JavaScript V3 version was developed for both PC and mobile devices, using HTML5.
First you need to apply for key in Google Console, create a Browser key , simple demo can be used:
<! DOCTYPE html><html> <head> <title>Asynchronous Loading</title> <meta name="viewport" content="initial-scale=1.0, User-scalable=no "> <meta charset="Utf-8"> <style> HTML, body, #map-canvas { height: ; margin: 0px; padding: 0px } </style> <script> function initialize() { varMapoptions = {zoom:8, Center:NewGoogle.maps.LatLng (-34.397,150.644) };varMap =NewGoogle.maps.Map (document.getElementById (' Map-canvas '), mapoptions);} function loadscript() { varScript = Document.createelement (' script '); Script.type =' Text/javascript '; SCRIPT.SRC =' https://maps.googleapis.com/maps/api/js?key=aizasycr69jlzcjigsw03n9_q_our8tvlchq59g&sensor=true& Callback=initialize '; Document.body.appendChild (script);} Window.onload = Loadscript;</script> </head> <body> <div id="Map-canvas"></div> </body></html>Upload to the server, directly click the HTML file does not seem to display,,,
The result is this, that,
All right, https://mts0.googleapis.com/. by the wall.
Had to add a layer ...
<! DOCTYPE html> -%; Margin0px Padding0PX} </style> "Map-canvas"></div> <script src="https://maps.googleapis.com/maps/api/js?key=aizasycr69jlzcjigsw03n9_q_our8tvlchq59g&sensor=true& Callback=initialize "/></script> <script> var moontypeoptions = {gettileurl:function (coord, zoom) { var Normalizedcoord = Getnormalizedcoord (coord, zoom);if(!normalizedcoord) {return NULL; } var bound = Math.pow (2, zoom);return ' Http://mt{1,2,3,0}.google.cn/vt/[email protected]&hl=zh-cn&gl=cn&x= '+normalizedcoord.x+' &y= '+normalizedcoord.y+' &z= '+zoom+' &s=galil '; }, Tilesize:NewGoogle.maps.Size ( the, the), Maxzoom:9, Minzoom:0, Radius:1738000, Name:' Moon '}; var moonmaptype =NewGoogle.maps.ImageMapType (moontypeoptions); function Initialize () {var mylatlng =NewGoogle.maps.LatLng (0,0); var mapoptions = {CENTER:MYLATLNG, zoom:1, Streetviewcontrol:false, maptypecontroloptions: {maptypeids: [' Moon '] } }; var map =NewGoogle.maps.Map (document.getElementById (' Map-canvas '), mapoptions); Map.mapTypes.set (' Moon ', Moonmaptype); Map.setmaptypeid (' Moon '); }//normalizes the coords that tiles repeat across the x axis (horizontally) //Like the standard Google map tiles.function Getnormalizedcoord (coord, zoom) {var y = coord.y; var x = coord.x;//Tile range in one Direction range are dependent on zoom level //0 = 1 Tile, 1 = 2 tiles, 2 = 4 tiles, 3 = 8 tiles, etcvar tilerange =1<< Zoom;//don ' t repeat across y-axis (vertically) if(Y <0|| Y >= tilerange) {return NULL; }//Repeat across x-axis if(X <0|| X >= tilerange) {x = (x% tilerange + tilerange)% Tilerange; }return{x:x, y:y}; } google.maps.event.addDomListener (Window,' Load ', initialize); </script> </body>Well, for the time being not running up, in this line was broken, and tileSize: new google.maps.Size(256, 256),
No solution for the moment .....
Try it for the German:
http://lbs.amap.com/api/javascript-api/example/d/0403-2/
I rub. Good to the force .....
Demo
Http://www.erdian.net/mapdemo_amap.html
Use Google Maps JavaScript version
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
