从谷歌地图API向导到现有的HTML结合JSON [英] Incorporating JSON from Google Maps API Wizard into existing html

问题描述

我想自定义一个谷歌的融合表基础地图。我使用的地图API风格向导，并创建了我想要的地图，但我在一个不知如何以纳入地图向导生成的JSON code到HTML code对现有页：

这是我想自定义地图： http://shatterbe.lt/ses_maps/per_capita_upper_eastside html的

这是code。该API地图向导给我：

  [
  {
    造型器：[
      {可见性：简化}
    ]
  }，{
    类型特征：road.highway，
    造型器：[
      {可见性：关}
    ]
  }
]
 

有人帮忙吗？我知道答案可能很简单，但我是新来的这一切！

解决方案

这对我的作品：

 函数初始化（）{
  VAR地图=新google.maps.Map（的document.getElementById（'googft-mapCanvas'）{
    中心：新google.maps.LatLng（25.826923725271442，-80.18369569667362）
    变焦：14，
    mapTypeId设为：google.maps.MapTypeId.ROADMAP
  }）;
  map.controls[google.maps.ControlPosition.RIGHT_BOTTOM].push(document.getElementById('googft-legend'));  层=新google.maps.FusionTablesLayer（{
    地图：地图，
    款式：
       {
         造型器：[
           {可见性：简化}
         ]
       }，{
        类型特征：road.highway，
         造型器：[
          {可见性：关}
         ]
       }
    ]
    热图：{启用：假}，
    查询：{
      选择：COL6
      从1_atSM8PGxxDThZlVGvFw4WlyaYHKuXU9CoCvGU0
      其中：
    }，
    选项​​：{
      styleId：2，
      templateId：2
    }
  }）;
}
 

描述如何样式添加到地图

文档>

从文档示例

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!

解决方案

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

这篇关于从谷歌地图API向导到现有的HTML结合JSON的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！