0

On a Wordpress page, I am using Javascript/Google Maps API to apply a Fusion Table layer to a google map. Here is my code:

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true">    
</script>

<script>
var map, layer;

function initialize() {
var chicago = new google.maps.LatLng(41.850033, -87.6500523);

map = new google.maps.Map(document.getElementById('map-canvas'), {
center: chicago,
zoom: 11
});

layer = new google.maps.FusionTablesLayer({
query: {
select: '\'Geocodable address\'',
from: '1x265dMvUClEGEVHD_3VRBvSRXk-mbs4jcO2xy29K'
}
});
layer.setMap(map);
}

google.maps.event.addDomListener(window, 'load', initialize);

</script>
<div style="width:500px; height:500px" id="map-canvas"></div>

I have 2 issues:

The buttons look fuzzy, pixelated and strange.

The markers from my fusion table are not showing up. However, if you click around on the map, you can still see the data points that I made on my fusion table map.

The theme that I am using was created by a developer at my company.

Any ideas on how to fix these issues?

hannahbalector
  • 29
  • 7
  • I ran your code in JSFiddle, and I dont see any issue, the buttons look ok, and I can see 2 red dots on the map. If you want to change the icon of your marker, you can do `icon: myicon.png` below your `zoom:11` line. The JSFiddle link: https://jsfiddle.net/vjpvhwpp/1/ – ztan Feb 13 '15 at 23:32
  • Sounds like a CSS-issue, please post a link to the page. – Dr.Molle Feb 13 '15 at 23:52
  • This was, indeed a CSS issue. The issue has been noted before in this article: as well as a few others. For this div, I changed the max-width to none, where it was 100% before. – hannahbalector Feb 18 '15 at 17:15

0 Answers0