Google Maps API v3



Points: Simple Example | Complex Example



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
   <title>Google Maps API v3 Point Map</title>
        
    <script type="text/javascript"  src="http://0api.maplarge.com/Scripts/jquery-1.3.2.min.js"></script>
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>  
    <script type="text/javascript"  src="http://0api.maplarge.com/Scripts/Map3.js"></script>

</head>
<body  >
<div style="height:600px; width:600px;" id="map_div" >
    Map Div - Map will appear here
</div>

<script type="text/javascript" >
<!--
              var startZoom = 7; //starting zoom level
              var startLat = 26.81497672282066; //starting 
              var startLng = -82.3886631011962;
              var filterString = "";
              var hovString = "SCHOOL_NAME_LONG,Math";//list of fields
              var layerString = "geo~dot~XY|data~FCATMap~Math";//map XY coords, of the dataset FCATMap and the field "Math" will be used for shading
              var shaderString = "method~interval|colors~Red/Yellow,Yellow/Green|ranges~25/50,50/75|dropShadow~true"; //colors and format for shading 
              var hoverFunc = null;
              var clickFunc = null;
              var makeList = null;

              var startSpot = new google.maps.LatLng(startLat, startLng);

              var mapOptions = {
                  zoom: startZoom,
                  center: startSpot,
                  mapTypeId: google.maps.MapTypeId.ROADMAP,
                  mapTypeControl: true
              };
              var map = new google.maps.Map(document.getElementById("map_div"), mapOptions); 

              var myLayer1 = new mapLayer("myLayer1",//globally unique name for your layer... allows you to reference it in inline code for on click events etc. 
                    map, //reference to a google map
                    layerString, //the data to be mapped
                    shaderString, //how to shade the data
                    filterString, //optional filters to be applied to point data
                    hovString, //data fields requested when hovering over a shape or point
                    hoverFunc, //function that takes a data object and returns a html string
                    clickFunc, //function that takes a data object and returns a html string
                    makeList, //function that takes a data object and rerutns null..  users set their own list html
                    21 //max number of list items requested
                    );
              var mouseTracker = new MouseWatcher(map, [myLayer1]); //manages layer interactivity between layers.. allows layer interactivity to be prioritized
              myLayer1.show(); //show the layer
              //layer2.hide(); hide the layer
              
     

         // -->
          </script>

    
</body>
</html>



        
    
       
         var hotelRates = {
        query: {
            table: { name: 'hotels' },
            select: { type: 'geo.dot' },
            where: [
                    {
                        col: "LowRate", test: "Between",
                        value: [{ min: 5, max: 10 }, { min: 100, max: 200}]
                    },
                    {
                        col: "ChainID", test: "Contains", value: 'hilton'
                    }
            ]
        },
        style: {
            method: 'interval',
            shadeBy: "hotels.LowRate",
            colors: [
                     { min: 'LightBlue', max: 'Blue' },
                     { min: 'Blue', max: 'Red' }
                 ],
            ranges: [
                    { min: 50, max: 125 },
                    { min: 125, max: 300 }
                ],
            dropShadow: true,
            steps: 100,
            text: { x: 3, y: 3, size: 9, text: '$', color: 'White' },
            numericLabel: { x: 8, y: 3, round: 0, color: 'White' },
            shape: 'rectangle',
            height: 14,
            size: 30,
            count: 300
        }
    };
    
    


Shapes: Simple Example | Complex Example



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
   <title>Google Maps API v3 Point Map</title>
        
    <script type="text/javascript"  src="http://0api.maplarge.com/Scripts/jquery-1.3.2.min.js"></script>
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>  
    <script type="text/javascript"  src="http://0api.maplarge.com/Scripts/Map3.js"></script>
   
</head>
<body  >
<div style="height:600px; width:600px;" id="map_div" >
    Map Div - Map will appear here
</div>

<script type="text/javascript" >
<!--
    var startZoom = 7; //starting zoom level
    var startLat = 26.81497672282066; //starting 
    var startLng = -82.3886631011962;
    var filterString = "";
    var hovString = "NAME,Math~avg"; //list of fields
    var layerString = "geo~poly~FLSchoolDist|data~FCATMap~Math~avg"; //map XY coords, of the dataset FCATMap and the field "Math" will be used for shading
    var shaderString = "method~interval|colors~White-0/White-0,Red/Yellow,Yellow/Green|ranges~-1/.1,25/50,50/75"; //colors and format for shading 

    var hoverFunc = null;
    var clickFunc = null;
    var makeList = null;

    var startSpot = new google.maps.LatLng(startLat, startLng);

    var mapOptions = {
        zoom: startZoom,
        center: startSpot,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        mapTypeControl: true
    };
    var map = new google.maps.Map(document.getElementById("map_div"), mapOptions);

    var myLayer1 = new mapLayer("myLayer1", //globally unique name for your layer... allows you to reference it in inline code for on click events etc. 
                    map, //reference to a google map
                    layerString, //the data to be mapped
                    shaderString, //how to shade the data
                    filterString, //optional filters to be applied to point data
                    hovString, //data fields requested when hovering over a shape or point
                    hoverFunc, //function that takes a data object and returns a html string
                    clickFunc, //function that takes a data object and returns a html string
                    makeList, //function that takes a data object and rerutns null..  users set their own list html
                    21 //max number of list items requested
                    );
    var mouseTracker = new MouseWatcher(map, [myLayer1]); //manages layer interactivity between layers.. allows layer interactivity to be prioritized
    myLayer1.show(); //show the layer
    //layer2.hide(); hide the layer
              
     

         // -->
          </script>

    
</body>
</html>