googlemaps-v3-utility-library
Version:
Google Maps API V3 Utility Library
104 lines (89 loc) • 3.11 kB
HTML
<html>
<head>
<meta charset="utf-8">
<title>Hello 2d World</title>
<style>
html, body, #map-div {
margin: 0;
padding: 0;
height: 100%;
}
</style>
<script src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script src="../src/CanvasLayer.js"></script>
<script>
var map;
var canvasLayer;
var context;
var rectLatLng = new google.maps.LatLng(40, -95);
var rectWidth = 6.5;
function init() {
// initialize the map
var mapOptions = {
zoom: 4,
center: new google.maps.LatLng(39.3, -95.8),
mapTypeId: google.maps.MapTypeId.ROADMAP,
styles: [
{
featureType: 'water',
stylers: [{ color: '#c3cfdd'}]
},
{
featureType: 'poi',
stylers: [{visibility: 'off'}]
}
]
};
var mapDiv = document.getElementById('map-div');
map = new google.maps.Map(mapDiv, mapOptions);
// initialize the canvasLayer
var canvasLayerOptions = {
map: map,
resizeHandler: resize,
animate: false,
updateHandler: update
};
canvasLayer = new CanvasLayer(canvasLayerOptions);
context = canvasLayer.canvas.getContext('2d');
}
function resize() {
// nothing to do here
}
function update() {
// clear previous canvas contents
var canvasWidth = canvasLayer.canvas.width;
var canvasHeight = canvasLayer.canvas.height;
context.clearRect(0, 0, canvasWidth, canvasHeight);
// we like our rectangles green
context.fillStyle = 'rgba(0, 255, 0, 1)';
/* We need to scale and translate the map for current view.
* see https://developers.google.com/maps/documentation/javascript/maptypes#MapCoordinates
*/
var mapProjection = map.getProjection();
/**
* Clear transformation from last update by setting to identity matrix.
* Could use context.resetTransform(), but most browsers don't support
* it yet.
*/
context.setTransform(1, 0, 0, 1, 0, 0);
// scale is just 2^zoom
var scale = Math.pow(2, map.zoom);
context.scale(scale, scale);
/* If the map was not translated, the topLeft corner would be 0,0 in
* world coordinates. Our translation is just the vector from the
* world coordinate of the topLeft corder to 0,0.
*/
var offset = mapProjection.fromLatLngToPoint(canvasLayer.getTopLeft());
context.translate(-offset.x, -offset.y);
// project rectLatLng to world coordinates and draw
var worldPoint = mapProjection.fromLatLngToPoint(rectLatLng);
context.fillRect(worldPoint.x, worldPoint.y, rectWidth, rectWidth);
}
document.addEventListener('DOMContentLoaded', init, false);
</script>
</head>
<body>
<div id="map-div"></div>
</body>
</html>