In my head:
<script type="text/javascript">
window._initHomeMap = function(){
if( document.getElementById('map') !== null ){
var map = new google.maps.Map(document.getElementById('map'), {
center: new google.maps.LatLng(30,0),
zoom: 2,
mapTypeId: google.maps.MapTypeId.ROADMAP,
disableDefaultUI: true,
scrollwheel: false,
draggable: false,
});
var world_geometry = new google.maps.FusionTablesLayer({
query: {
select: 'geometry',
from: '1N2LBk4JHwWpOY4d9fobIn27lfnZ5MDy-NoqqRpk',
where: 'ISO_2DIGIT IN ("US", "CA", "AF")',
},
heatmap: {
enabled: false
},
suppressInfoWindows: true,
map: map,
options: {
styleId: 2,
templateId: 2
},
styles: [{ //included because geometry not showing up
polygonOptions: {
fillColor: '#FF0000',
fillOpacity: 0.4
}
}],
});
}
}
</script>
In my body:
<div id="map"></div>
Just before the closing body tag:
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBrRJwJFfNCdVLJwa6yhR8UBZR1m2A018Q&callback=window._initHomeMap"></script>
I want to pull from a FusionTable that has country geometry in it and show country boundaries on the Google map. But for some reason the geometry isn't showing (unless I use that styles property) and the where clause in the query isn't working. I've been scouring SO and elsewhere and I can't find what I'm doing wrong. Been at this for hours. Any help/guidance appreciated!
If I generate the query using the FusionTables UI, I get (which works for me):
query: {
select: 'geometry',
from: '1N2LBk4JHwWpOY4d9fobIn27lfnZ5MDy-NoqqRpk',
where: "ISO_2DIGIT IN ('US', 'CA', 'AF')",
},
(Notice the swapped "
& '
in the where:
)
code snippet:
window._initHomeMap = function() { if (document.getElementById('map') !== null) { var map = new google.maps.Map(document.getElementById('map'), { center: new google.maps.LatLng(30, 0), zoom: 2, mapTypeId: google.maps.MapTypeId.ROADMAP, disableDefaultUI: true, scrollwheel: false, draggable: false, }); var world_geometry = new google.maps.FusionTablesLayer({ query: { select: 'geometry', from: '1N2LBk4JHwWpOY4d9fobIn27lfnZ5MDy-NoqqRpk', where: "ISO_2DIGIT IN ('US', 'CA', 'AF')", }, heatmap: { enabled: false }, suppressInfoWindows: true, map: map, options: { styleId: 2, templateId: 2 }, styles: [{ //included because geometry not showing up polygonOptions: { fillColor: '#FF0000', fillOpacity: 0.4 } }], }); } } google.maps.event.addDomListener(window, "load", window._initHomeMap);
html, body, #map { height: 100%; width: 100%; margin: 0px; padding: 0px }
<script src="https://maps.googleapis.com/maps/api/js"></script> <div id="map"></div>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.