The development record of Google map based on JS

• Google Map resource interface in China:ditu.google.cn
• The map of Google is drawn in the canvas component
• Average non-profit organizations call Google Maps with daily load times below 25k
• To create a simple Google Maps function:

  var mapoptions = {center:new Google.maps.LatLng ( -34.397, 150.644), zoom:8,maptypeid:google.maps.maptypeid.roadmap}; var map = new Google.maps.Map (#canvas对象, mapoptions);

• Zoom: Map zoom level, range 0~21 , from big to small
• Maptype classification:
  • Roadmap, which displays the default, normal 2D tiles for Google maps.
  • Satellite, used to display the captured tiles.
  • HYBRID, a tile layer that displays both the captured tile and the important map item (road, city name).
  • TERRAIN, which is used to display natural topographic map blocks, which contain elevations and water maps items (mountains, rivers, etc.).

Mobile device optimization

• Set the width and Height properties that contain your map to 100%. Note, however, that using these values on some older desktop browsers does not give a good display.
• You can detect iPhone and Android devices by checking the Navigator.useragent property in the DOM:

  function Detectbrowser () {var useragent = Navigator.useragent;var Mapdiv = document.getElementById ("Map_canvas"); if ( Useragent.indexof (' IPhone ')! =-1 | | Useragent.indexof (' Android ')! =-1) {mapdiv.style.width = ' 100% '; mapdiv.style.height = ' 100% ';} else { Mapdiv.style.width = ' 600px '; mapdiv.style.height = ' 800px ';}}

• Android and IOS devices apply the following tags to specify that the map should be displayed in full-screen mode, and that the user must not resize the map. Note that you need to add this tag to the elements of your Web page to use the IPhone's Safari browser.
  <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />

Event

• Event Type
  • User events (Google Maps API type, non-traditional DOM events) are packaged by Google Maps and block compatibility issues across browsers. Event registration is on the map marker Marker object.
  • MVC State Change notification, event registration on a map object, reacting to changes in the Maps API object, naming property_changed
  Event Registration Method: Google.maps.event.addListener (Register object, response type, fallback handler)
  • Use example:

  function Initialize () {      var mapoptions = {        zoom:4,        center:new google.maps.LatLng (-25.363882, 131.044922),        MapTypeId:google.maps.MapTypeId.ROADMAP      };      var map = new Google.maps.Map (document.getElementById (' Map_canvas '), mapoptions);      var marker = new Google.maps.Marker ({        position:map.getCenter (),        Map:map,        title: ' Click to zoom '      }); C11/>google.maps.event.addlistener (map, ' center_changed ', function () {        //3 seconds after the center of the map has C Hanged, pan back to the        //marker.        Window.settimeout (function () {          Map.panto (marker.getposition ());        };      });      Google.maps.event.addListener (marker, ' click ', Function () {        map.setzoom (8);        Map.setcenter (Marker.getposition ());      }); Google.maps.event.addDomListener (window, ' Load ', initialize);

The development record of Google map based on JS