TRAILim map

Maps basic and styling


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