Jump to content

Archived

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

  • 0
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


×
×
  • Create New...