Jump to content


This topic is now archived and is closed to further replies.

  • 0

Combining Layers From Google Maps Api With Caspio Map Mashup



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';

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

<!DOCTYPE html>
    #map-canvas { width:500px; height:400px; }
    .layer-wizard-search-label { font-family: sans-serif };
  <script type="text/javascript"
  <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);
      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);
    <div id="map-canvas"></div>

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!

Share this post

Link to post
Share on other sites

0 answers to this question

Recommended Posts

There have been no answers to this question yet

  • Create New...