Search the Community
Showing results for tags 'kml'.
Found 1 result
-
Combining Layers From Google Maps Api With Caspio Map Mashup
VAP1 posted a question in API and Integration
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!