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!