Jump to content
  • 0
Sign in to follow this  
VAP1

Combining Layers From Google Maps Api With Caspio Map Mashup

Question

 

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!

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

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
Sign in to follow this  

×
×
  • Create New...