Basic Map
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<head>
<title>TRAILim map</title>
<style type="text/css">
#map_canvas {
width: 400px;
height: 400px;
}
</style>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&libraries=geometry,places"></script>
<script type="text/javascript">
var trMap = {};
trMap.mapOptions = {
zoom: 8,
center: new google.maps.LatLng(40.758954, -73.98498),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
trMap.init = function (){
trMap.map = new google.maps.Map(document.getElementById('map_canvas'),trMap.mapOptions);
}
window.onload = trMap.init;
</script>
</head>
<body>
<div id="map_canvas"></div>
</body>
</html>
Initialize the map
Styling map controls
Reference: controls trMap.controls = {};
trMap.controls.custom = {};
trMap.controls.custom.add = function(div_id,controlPosition){
if (controlPosition == undefined) controlPosition = google.maps.ControlPosition.TOP_LEFT;
var element = document.getElementById(div_id);
trMap.map.controls[controlPosition].push(element);
google.maps.event.addDomListener(trMap.map, 'zoom_changed', function(e){
var zoom = trMap.map.getZoom();
var element = document.getElementById('tr_mapstatus_zoom');
element.innerHTML = zoom;
});
}
1
2
3
map zoom: 10
Gross zoom: move to map
mapTypeControl | ||
panControl | ||
zoomControl | ||
overviewMapControl | ||
scaleControl | ||
streetViewControl |
Custom maps
Reference: Map typesGoogle Maps style wizard
trMap.setMapStyles = function(styles){
if(styles==undefined) styles = trMap.mapStyles.style1;
trMap.map.setOptions({styles:styles});
}
trMap.mapStyles = {};
trMap.mapStyles.style2 = [
{
stylers: [
{hue: "#00eee6"},
{saturation: 0}
]
},{
"featureType": "administrative.country",
"stylers": [
{"weight": 0.2},
{"color": "#ffffee"}
]
},{
"featureType": "administrative.locality",
"elementType": "labels.text.fill",
"stylers": [
{"color": "#0000ee"}
]
}
];
trMap.setMapStyles(trMap.mapStyles.style2)
trMap.mapStyles = {};
trMap.mapStyles.style1 = [
{
stylers: [
{hue: "#00ffe6"},
{saturation: -20}
]
},{
featureType: "road",
elementType: "geometry",
stylers: [
{lightness: 100},
{visibility: "simplified"}
]
},{
featureType: "road",
elementType: "labels",
stylers: [
{visibility: "off"}
]
},{
"featureType": "administrative.country",
"stylers": [
{"weight": 0.2},
{"color": "#ffffff"}
]
},{
"featureType": "administrative.locality",
"elementType": "labels.text.fill",
"stylers": [
{"color": "#8080e4"}
]
}
];
trMap.mapStyles.init = function(styleJson){
if(styleJson==undefined) styleJson = trMap.mapStyles.style1;
//define new styled map
var styledMap1 = new google.maps.StyledMapType(styleJson,{name: "Styled Map 1"});
// Set the registry to associate 'map_style1' with the custom map type we created 'styledMap1'
trMap.map.mapTypes.set('map_style1', styledMap1);
//add map to mapTypeControl
var mapOptions ={
mapTypeControlOptions : {mapTypeIds: [google.maps.MapTypeId.ROADMAP,google.maps.MapTypeId.SATELLITE, 'map_style1']}
}
trMap.map.setOptions(mapOptions);
}
Init map style
ROADMAP
TERRAIN
SATELLITE
HYBRID
map_style1
No comments:
Post a Comment