JavaScript API Integration

Google Maps API code is drop-in compatible with the MapLarge platform. There are two methods for integrating your map.

Method 1: Create a Google Map with MapLarge Map Constructor


Add a MapLarge wrapper at the beginning of your javascript where the google map is instantiated and configured.
  1. <!DOCTYPE html>
  2. <html>
  3.   <head>
  4.     <title>Simple Map</title>
  5.     <script type="text/javascript" src="//e.maplarge.com/JS"></script>
  6.   	<script type="text/javascript" src="//maps.googleapis.com/maps/api/js?libraries=visualization,drawing&sensor=false"></script>
  7.     <script type="text/javascript">
  8.   var map;
  9.         ml.onload( function () {
  10.             // add a hotel layer using ML as the icon text
  11.             var layers = [{
  12.                 onClick: "template",
  13.                 query: {
  14.                     select: {
  15.                         type: "geo.dot"
  16.                     },
  17.                     where: [],
  18.                     table: {
  19.                         name: "hms/hotels"
  20.                     }
  21.                 },
  22.                 style: {
  23.                     method: "rules",
  24.                     rules: [
  25.                         {
  26.                             style: {
  27.                                 fillColor: "Blue",
  28.                                 size: 24,
  29.                                 text: {
  30.                                     x: 4,
  31.                                     y: 7,
  32.                                     text: "ML"
  33.                                 }
  34.                             },
  35.                             where: [
  36.                                 {
  37.                                     col: "hms/hotels.HotelName",
  38.                                     test: "Contains",
  39.                                     value: "hilton"
  40.                                 }
  41.                             ]
  42.                         }
  43.                     ],
  44.                     colorTransform: {
  45.                         alpha: .74
  46.                     }
  47.                 },
  48.                 onHover: "template",
  49.                 hoverTemplate: "{HotelName}",
  50.                 hoverFieldsCommaDel: "HotelName",
  51.                 clickTemplate: "{HotelName}",
  52.                 visible: true
  53.             }];
  54.  
  55.             //create a map zoomed in on Atlanta, GA (34,-84)
  56.             //the second parameter is a Object literal
  57.             var div = document.getElementById('map-canvas');
  58.             var mlmap = new ml.map( div, { layers: layers, lat: 33.7514, lng: -84.3378, z: 9, api:"GOOGLE" } );
  59.  
  60.             map = mlmap.getInternalMap();
  61.             //========================
  62.  
  63.             var myLatlng = new google.maps.LatLng(34,-84);
  64.             var myLatlng1 = new google.maps.LatLng(34.11,-84.15);
  65.             var myLatlng2 = new google.maps.LatLng(34.15,-84.12);
  66.             var myLatlng3 = new google.maps.LatLng(34.18,-84.09);
  67.             var myLatlng4 = new google.maps.LatLng(34.20,-84.04);
  68.  
  69.             var trafficLayer = new google.maps.TrafficLayer();
  70.             trafficLayer.setMap(map);
  71.  
  72.             var marker = new google.maps.Marker({
  73.                 position: myLatlng,
  74.                 map: map,
  75.                 title: 'Hello World!'
  76.             });
  77.             var marker1 = new google.maps.Marker({
  78.                 position: myLatlng1,
  79.                 map: map,
  80.                 title: 'Hello World!'
  81.             });
  82.             var marke2r = new google.maps.Marker({
  83.                 position: myLatlng2,
  84.                 map: map,
  85.                 title: 'Hello World!'
  86.             });
  87.             var marker3 = new google.maps.Marker({
  88.                 position: myLatlng3,
  89.                 map: map,
  90.                 title: 'Hello World!'
  91.             });
  92.             var marker4 = new google.maps.Marker({
  93.                 position: myLatlng4,
  94.                 map: map,
  95.                 title: 'Hello World!'
  96.             });
  97.  
  98.         });
  99. 	</script>  
  100.     <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
  101.     <meta charset="utf-8">
  102.     <style>
  103.       html, body, #map-canvas {
  104.         height: 100%;
  105.         margin: 0px;
  106.         padding: 0px
  107.       }
  108.     </style>
  109.   </head>
  110.   <body>
  111.     <div id="map-canvas"></div>
  112.   </body>
  113. </html>

Advantages

Seamless API Changing Allows seamless switching to other APIs like Leaflet, ESRI and OpenGeo for code that is coded against the MapLarge map wrapper object.
Raw Google Map Access Also gives the flexibility to grab the internal google map for google specific calls.

Disadvantages

Map Constructor Change Requires replacing existing google maps constructor and then calling mlmap.getInternalMap() to get a reference to the internal Google Map.

Method 2: Google Map Directly and Pass it to MapLarge Map Constructor

Create a MapLarge map instantiated using the existing Google Map API code.
  1. <!DOCTYPE html>
  2. <html>
  3.   <head>
  4.     <title>Simple Map</title>
  5.     <script type="text/javascript" src="//e.maplarge.com/JS"></script>
  6.   	<script type="text/javascript" src="//maps.googleapis.com/maps/api/js?libraries=visualization,drawing&sensor=false"></script>
  7.     <script type="text/javascript">
  8.       ml.onload(function() {
  9. 			var startZoom = 10;
  10.             var startLat = 38.886349760669056;
  11.             var startLng = -77.00554275512695;
  12.  
  13.             var mapOptions = {
  14.                 center: new google.maps.LatLng(startLat, startLng),
  15.                 zoom: startZoom,
  16.                 mapTypeId: google.maps.MapTypeId.TERRAIN
  17.             };
  18.             var googMap = new google.maps.Map(document.getElementById("map-canvas"),
  19.                 mapOptions);
  20.  
  21.   			var marker = new google.maps.Marker({
  22.                   position: mapOptions.center,
  23.                   map: googMap,
  24.                   title: 'Hello World!'
  25.               });
  26.  
  27.  
  28.             var mlmap = new ml.map(googMap);
  29. });</script>  
  30.     <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
  31.     <meta charset="utf-8">
  32.     <style>
  33.       html, body, #map-canvas {
  34.         height: 100%;
  35.         margin: 0px;
  36.         padding: 0px
  37.       }
  38.     </style>
  39.  
  40.   </head>
  41.   <body>
  42.     <div id="map-canvas"></div>
  43.   </body>
  44. </html>

Advantages

Low Effort Allows adding a MapLarge Layer with zero changes to existing code.

Disadvantages

Not Portable to Other API’s Code that does not use the MapLarge map wrapper object does not allow fluid switching between different client side API’s like Leaflet and ESRI.
MAPPING PLATFORM FOR BIG DATA VISUALIZATION, ANALYTICS & PUBLISHING
Request More Info