Combining Layers From Google Maps Api With Caspio Map Mashup

VAP1 · May 16, 2015

Hello all,

I have setup caspio's map mashup and now I would like to combine it with various layers using google maps api v3. I have the code setup so each one works on its own, however I am not sure how to integrate the code for the two so they work together.

Below is the code I got from the caspio mashup wizard, and as is it works fine and shows the results page records on the map:

<script type="text/javascript" src="//d23b32zmhbr2ct.cloudfront.net/mashup/script/caspio_mashups_v7.js"></script>
<script type="text/javascript">

var mapSettings = {
    'mapType': 'G',
    'mapView': 'R',
    'mapWidth': '800',
    'mapHeight': '600',
    'mapCssStyle': '',
    'useAutoZoom': 'N',
    'zoomLevelResult': '6',
    'zoomLevelDetails': '11',
    'zoomLevelMapIt': '11',
    'bubbleOpenType': '1',
    'disableScrollWheel': 'N',
    'showTrafficLayer': 'N',
    'plotMarkers': 'Y',
    'homePosition': 'amman, Jordan',
    'apiKey': ''
};
var dpSettings_********************* = new mapDataPageSettings('*********************');
dpSettings_*********************.DefaultIcon = '//d23b32zmhbr2ct.cloudfront.net/mashup/icons/flat/icon2.png';
dpSettings_*********************.DefaultIconWidth = '20';
dpSettings_*********************.DefaultIconHeight = '34';
dpSettings_*********************.MapItEnabled = 'Y';
dpSettings_*********************.MapItLabel = 'View on map';
dpSettings_*********************.FilterNeed = 'N';
dpSettings_*********************.FilterRowSize = '5';
mapEnvironment.AddDataPageMapSettings(dpSettings_*********************);
</script>

The following code is what i have for displaying the fusion table in google maps API

<!DOCTYPE html>
<html>
  <head>
  <style>
    #map-canvas { width:500px; height:400px; }
    .layer-wizard-search-label { font-family: sans-serif };
  </style>
  <script type="text/javascript"
    src="http://maps.google.com/maps/api/js?sensor=false">
  </script>
  <script type="text/javascript">
    var map;
    var layer_0;
    function initialize() {
      map = new google.maps.Map(document.getElementById('map-canvas'), {
        center: new google.maps.LatLng(32.06811272653243, 35.41485433094706),
        zoom: 9
      });
      var style = [
        {
          featureType: 'poi',
          elementType: 'all',
          stylers: [
            { visibility: 'off' }
          ]
        },
        {
          featureType: 'transit',
          elementType: 'all',
          stylers: [
            { visibility: 'off' }
          ]
        }
      ];
      var styledMapType = new google.maps.StyledMapType(style, {
        map: map,
        name: 'Styled Map'
      });
      map.mapTypes.set('map-style', styledMapType);
      map.setMapTypeId('map-style');
      layer_0 = new google.maps.FusionTablesLayer({
        query: {
          select: "col18",
          from: "1QewvePdgZ_iYjkE0mFvx9lzVXPqqkKm-xy-xbzFq"
        },
        map: map,
        styleId: 4,
        templateId: 5
      });
    }
    google.maps.event.addDomListener(window, 'load', initialize);
  </script>
  </head>
  <body>
    <div id="map-canvas"></div>
  </body>
</html>

Is it possible to combine the two into one map, and if so, how would I go about doing so? Any help or guidance would be much appreciated!

Login

Combining Layers From Google Maps Api With Caspio Map Mashup

Question

VAP1

Link to comment

Share on other sites

0 answers to this question

Recommended Posts

Join the conversation

Browse