Incorporating JSON from Google Maps API Wizard into existing html

问题

I'm trying to customize the base map for a google fusion table. I'm using the Maps API Style Wizard and have created the map I want, but I'm at a loss as to how to incorporate the JSON code generated by the Map wizard into the html code for the existing page:

This is the map I'd like to customize: http://shatterbe.lt/ses_maps/per_capita_upper_eastside.html

And this is the code that the API Map wizard gave me:

[
  {
    "stylers": [
      { "visibility": "simplified" }
    ]
  },{
    "featureType": "road.highway",
    "stylers": [
      { "visibility": "off" }
    ]
  }
]

Someone help? I know the answer is probably very simple, but I'm new to all of this!

回答1:

This works for me:

function initialize() {
  var map = new google.maps.Map(document.getElementById('googft-mapCanvas'), {
    center: new google.maps.LatLng(25.826923725271442, -80.18369569667362),
    zoom: 14,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  });
  map.controls[google.maps.ControlPosition.RIGHT_BOTTOM].push(document.getElementById('googft-legend'));

  layer = new google.maps.FusionTablesLayer({
    map: map,
    styles: [
       {
         "stylers": [
           { "visibility": "simplified" }
         ]
       },{
        "featureType": "road.highway",
         "stylers": [
          { "visibility": "off" }
         ]
       }
    ],
    heatmap: { enabled: false },
    query: {
      select: "col6",
      from: "1_atSM8PGxxDThZlVGvFw4WlyaYHKuXU9CoCvGU0",
      where: ""
    },
    options: {
      styleId: 2,
      templateId: 2
    }
  });
}

Documentation describing how to add styling to the map

Example from the documentation

来源：https://stackoverflow.com/questions/17029606/incorporating-json-from-google-maps-api-wizard-into-existing-html