`
sillycat
  • 浏览: 2537879 次
  • 性别: Icon_minigender_1
  • 来自: 成都
社区版块
存档分类
最新评论

SuperPlan(5)TaoBao Winner - UI - Google Map

 
阅读更多
SuperPlan(5)TaoBao Winner - UI - Google Map

9. Google Map
9.1 Reference URL
https://developers.google.com/maps/documentation/javascript/reference

9.2 Obtaining an API Key
Visit https://code.google.com/apis/console
Click the [Services]
Find [Google Maps API v3] and [Google Maps API v2] and turn them on.
[API Access] ---> [Simple API Access] ---> [Key for browser apps(with referers)]

9.3 Simple Map Example
A demo file named googlemap_simple_map.html
<html>
  <head>
    <title>Simple Map</title>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <style>
      html,body,#map-canvas {
        margin: 0;
        padding: 0;
        height: 100%;
      }
    </style>
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
    <script>
var map;
function initialize() {
  var mapOptions = {
    zoom: 15,
    center: new google.maps.LatLng(30.243089,-97.798446),
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };
  map = new google.maps.Map(document.getElementById('map-canvas'),
      mapOptions);
}

google.maps.event.addDomListener(window, 'load', initialize);

    </script>
  </head>
  <body>
    <div id="map-canvas"></div>
  </body>

</html>

When we load the body page, we will initialize the map. The ZOOM control the big or small, and longitude and latitude control the location.

We use this script to add the google map API
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&key=asdfasdfasdf"></script>

   
Key is the GOOGLE map key we get from the previous steps.

Asynchronously Loading the API
Use the loadScript method to asynchronously load the API script with a callback method. Sample in googlemap_simple_asynchronous.html
<script>
function initialize() {
  var mapOptions = {
    zoom: 15,
    center: new google.maps.LatLng(30.243089,-97.798446),
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };
  var map = new google.maps.Map(document.getElementById('map-canvas'),
      mapOptions);
}

function loadScript(){
var script = document.createElement("script");
script.type = "text/javascript";
script.src = "http://maps.googleapis.com/maps/api/js?key=My_KEY&sensor=true&callback=initialize";
document.body.appendChild(script);}
window.onload = loadScript;

    </script>

Map Types
ROADMAP displays the normal, default 2D tiles of Google Maps.
SATELLITE displays photographic tiles.
HYBRID
TERRAIN displays physical relief tiles for displaying elevation and water features.

9.4 Add Marker and Info
Some related class
https://developers.google.com/maps/documentation/javascript/reference#InfoWindow
https://developers.google.com/maps/documentation/javascript/reference#Marker
https://developers.google.com/maps/documentation/javascript/reference#MapsEventListener

The example file named googlemap_marker_info.html is as follow:
<script type="text/javascript">
  function initialize() {
    var latlng = new google.maps.LatLng(30.243089,-97.798446);
    var myOptions = {
      zoom: 12,
      center: latlng,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

// Information Box Content
var InfoBoxContent = '<div id="infoboxcontent">' +
'<h1>Hello World!</h1><p>Example link <a href="http://sillycat.iteye.com">Blog</a></p>' +
'<img width="240" height="180" src="http://dl.iteye.com/upload/picture/pic/84931/18cd6d9d-1905-35d8-a9e2-b4f5d7b59eb4.jpg" >' +
'</div>';
//InfoWindow
var InfoBox_1 = new google.maps.InfoWindow({
content: InfoBoxContent
});
var InfoBox_2 = new google.maps.InfoWindow({
content: InfoBoxContent
});
// Markervar marker_latlng_1 = new google.maps.LatLng(30.243416,-97.813464);var marker_1 = new google.maps.Marker({position: marker_latlng_1, map: map,title:"Park 1"});
var marker_latlng_2 = new google.maps.LatLng(30.241691,-97.794784);var marker_1 = new google.maps.Marker({position: marker_latlng_2, map: map,title:"Park 2"});
// Click marker to open information boxgoogle.maps.event.addListener(marker_1, 'click', function() {InfoBox_1.open(map, marker_1);});
google.maps.event.addListener(marker_2, 'click', function() {InfoBox_2.open(map, marker_2);});
  }
 
  function loadScript(){var script = document.createElement("script");script.type = "text/javascript";script.src = "http://maps.googleapis.com/maps/api/js?key=MY_KEY&sensor=true&callback=initialize";
document.body.appendChild(script);
  }
 
  window.onload = loadScript;

</script>

It is working, it is really easy since this is a well documented open API.

10. Backbone
come soon

References:
BackBone
http://dailyjs.com/2012/11/29/backbone-tutorial-1/

http://www.youtube.com/watch?v=HsEw2i4wQMM
https://github.com/thomasdavis/backbonetutorials/tree/gh-pages/videos/beginner

http://backbonejs.org/#introduction

http://coenraets.org/blog/2012/02/sample-app-with-backbone-js-and-twitter-bootstrap/

google map
https://github.com/eschwartz/backbone.googlemaps
http://gmaps-samples-v3.googlecode.com/svn/trunk/toomanymarkers/toomanymarkers.html
http://gmaps-samples-v3.googlecode.com/svn/trunk/smartinfowindow/smartinfowindow.html
https://developers.google.com/maps/documentation/javascript/examples/infowindow-simple

https://developers.google.com/maps/documentation/javascript/tutorial

examples
http://g-hk.org/web-programming/google-maps-api-examples/

Basic Examples
https://developers.google.com/maps/documentation/javascript/examples/map-simple-async
https://developers.google.com/maps/documentation/javascript/examples/map-simple

Marker and Info
http://gmaps-samples-v3.googlecode.com/svn/trunk/smartinfowindow/smartinfowindow.html
https://developers.google.com/maps/documentation/javascript/reference#InfoWindow

分享到：
| SuperPlan(4)TaoBao Winner - UI - SSI Pro ...
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics