-
[구글맵] 마커 여러개 찍기!구글맵 만들기 2011. 6. 16. 14:50반응형
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Google Maps JavaScript API Example: Simple Projection</title>
<link href="http://code.google.com/apis/maps/ documentation/_javascript/examples/default.css" rel="stylesheet" type="text/css" />
<script type="text/_javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script>var chicago = new google.maps.LatLng(41.850033, -87.6500523);
var anchorage = new google.maps.LatLng(61.2180556, -149.9002778);
var mexico = new google.maps.LatLng(19.4270499, -99.1275711);
var equator = new google.maps.LatLng(0,0);
var london = new google.maps.LatLng(51.5001524, -0.1262362);
var johannesburg = new google.maps.LatLng(-26.201452, 28.045488);
var kinshasa = new google.maps.LatLng(-4.325, 15.322222);
var sydney = new google.maps.LatLng( -33.867139, 151.207114);
var locationArray = [chicago,anchorae,mexico,equator,london,johannesburg,kinshasa,sydney];
var locationNameArray = ["Chicago","Anchorage","Mexico City","The Equator","London","Johannesburg","Kinshasa","Sydney"];// Note: this value is exact as the map projects a full 360 degrees of longitude
var GALL_PETERS_RANGE_X = 800;// Note: this value is inexact as the map is cut off at ~ +/- 83 degrees.
// However, the polar regions produce very little increase in Y range, so
// we will use the tile size.
var GALL_PETERS_RANGE_Y = 510;function degreesToRadians(deg) {
return deg * (Math.PI / 180);
}function radiansToDegrees(rad) {
return rad / (Math.PI / 180);
}
function GallPetersProjection() {// Using the base map tile, denote the lat/lon of the equatorial origin.
this.worldOrigin_ = new google.maps.Point(GALL_PETERS_RANGE_X * 400 / 800,
GALL_PETERS_RANGE_Y / 2);// This projection has equidistant meridians, so each longitude degree is a linear
// mapping.
this.worldCoordinatePerLonDegree_ = GALL_PETERS_RANGE_X / 360;// This constant merely reflects that latitudes vary from +90 to -90 degrees.
this.worldCoordinateLatRange = GALL_PETERS_RANGE_Y / 2;
};GallPetersProjection.prototype.fromLatLngToPoint = function(latLng) {
var origin = this.worldOrigin_;
var x = origin.x + this.worldCoordinatePerLonDegree_ * latLng.lng();// Note that latitude is measured from the world coordinate origin
// at the top left of the map.
var latRadians = degreesToRadians(latLng.lat());
var y = origin.y - this.worldCoordinateLatRange * Math.sin(latRadians);
return new google.maps.Point(x, y);
};GallPetersProjection.prototype.fromPointToLatLng = function(point, noWrap) {
var y = point.y;
var x = point.x;if (y < 0) {
y = 0;
}
if (y >= GALL_PETERS_RANGE_Y) {
y = GALL_PETERS_RANGE_Y;
}
var origin = this.worldOrigin_;
var lng = (x - origin.x) / this.worldCoordinatePerLonDegree_;
var latRadians = Math.asin((origin.y - y) / this.worldCoordinateLatRange);
var lat = radiansToDegrees(latRadians);
return new google.maps.LatLng(lat, lng, noWrap);
};
function initialize() {var gallPetersMap;
var gallPetersMapType = new google.maps.ImageMapType({
getTileUrl: function(coord, zoom) {
var numTiles = 1 << zoom;// Don't wrap tiles vertically.
if (coord.y < 0 || coord.y >= numTiles) {
return null;
}// Wrap tiles horizontally.
var x = ((coord.x % numTiles) + numTiles) % numTiles;// For simplicity, we use a tileset consisting of 1 tile at zoom level 0
// and 4 tiles at zoom level 1. Note that we set the base URL to a relative
// directory.
var baseURL = 'images/';
baseURL += 'gall-peters_' + zoom + '_' + x + '_' + coord.y + '.png';
return baseURL;
},
tileSize: new google.maps.Size(800, 512),
isPng: true,
minZoom: 0,
maxZoom: 1,
name: 'Gall-Peters'
});
gallPetersMapType.projection = new GallPetersProjection();
var mapOptions = {
zoom: 0,
center: new google.maps.LatLng(0,0),
mapTypeControlOptions: {
mapTypeIds: [google.maps.MapTypeId.ROADMAP, 'gallPetersMap']
}
};
gallPetersMap = new google.maps.Map( document.getElementById("gallPetersMap"),
mapOptions);gallPetersMap.mapTypes.set('gallPetersMap', gallPetersMapType);
gallPetersMap.setMapTypeId('gallPetersMap');
var coord;
for (coord in locationArray) {
new google.maps.Marker({
position: locationArray[coord],
map: gallPetersMap,
title: locationNameArray[coord]
});
}
google.maps.event.addListener(gallPetersMap, 'click', function(event) {
alert;("Point.X.Y: " + event.latLng);
});
}
</script>
</head>
<body onload="initialize()">
<div id="gallPetersMap" style="width: 500px; height: 400px;"></div>
</body>
</html>'구글맵 만들기' 카테고리의 다른 글
구글맵에서 좌표로 주소 가져요기! (0) 2012.05.13 구글맵에서 주소로 좌표 가져오기! (0) 2012.05.13 [구글맵] 마커대신 이미지 넣기! (0) 2011.06.16