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
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