Google Map API未显示 [英] Google Map API not showing up

查看:86
本文介绍了Google Map API未显示的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我在我的网站中包含一个Google Map API,其中显示了带有信息弹出窗口的多个标记.我已经将所有值输入到我的标记变量中,但是地图本身根本没有显示.我已经包含了所有的javascript文件.我似乎无法弄清楚哪里出了问题.任何帮助将不胜感激.这是标记的脚本:

I'm including a Google Map API in my site where it shows several markers with an info popup. I've input all my values into my marker variable but the map itself is not showing up at all. I've included all the javascript files. I can't seem to figure out what is wrong. Any help would be greatly appreciated. Here is the script for the markers:

<script type="text/javascript">

  $(function(){

    $('#test1').gmap3({
      map:{
        options:{
          center:[34.8400335,-115.967051],
          zoom: 7
        }
      },
      marker:{
        values:[
          {latLng:[48.8620722, 2.352047],data:"info"},
           {latLng:[34.1301, -117.286],data:"Client: Hi-Grade Materials, Project: San Bernardino Mine, Surveyed for Desert Tortoise Species"},
           {latLng:[34.8958, -117.016],data:"Client: City of Barstow, Project: South Borrow Area, Surveyed for Desert Tortoise and Burrowing Owl"},
           {latLng:[34, -117.3],data:"Client: R.A.M. Architecture, Project: Hesperia Development, Surveyed for Burrowing Owls"},
           {latLng:[33.6778, -117.215],data:"Client: Brookfield Residential, Project: Audie Murphy Ranch, Surveyed for Burrowing Owls"},
           {latLng:[33.5555, -117.203],data:"Client: Pacific Coast Land Consultants, Project: Westpark Promenade, Surveyed for various sensitive species"},
           {latLng:[34.5221, -117.325],data:"Client: Civic Rogers LLC, Project: Civic Rogers Development, Surveyed for Mojave Ground Squirrel, Desert Tortoise and Burrowing Owl"},
           {latLng:[37.5194, -122.039],data:"Client: Bielectric USA, Project: Navajo Solar Development, Surveyed for Mojave Ground Squirrel"},
           {latLng:[34.134, -118.332],data:"Client: Sunlight Partners, Project: Arrache 4006, Surveyed for Desert Tortoise and Burrowing Owls"},
            {latLng:[33.6885, -117.188],data:"Client: Golden Eagle Properties, Project: Villa Siena, Surveyed for various sensitive species"},
             {latLng:[34.1197, -117.536],data:"Client: Winchester Associates, Project: Moreno Development, Surveyed for Burrowing Owl species"},
             {latLng:[38.3991, -122.84],data:"Client: Dyna Solar, Project: MA Solar Site, Surveyed for Burrowing Owls"},
          {address:"10253 6th Avenue, Hesperia, CA", data:"Client: UEG, Mojave Square Project, Surveyed for Burrowing Owl Species"},
          {address:"", data:"", options:{icon: "http://maps.google.com/mapfiles/marker_green.png"}}
        ],
        options:{
          draggable: false 
        },
        events:{
          mouseover: function(marker, event, context){
            var map = $(this).gmap3("get"),
              infowindow = $(this).gmap3({get:{name:"infowindow"}});
            if (infowindow){
              infowindow.open(map, marker);
              infowindow.setContent(context.data);
            } else {
              $(this).gmap3({
                infowindow:{
                  anchor:marker, 
                  options:{content: context.data}
                }
              });
            }
          },
          mouseout: function(){
            var infowindow = $(this).gmap3({get:{name:"infowindow"}});
            if (infowindow){
              infowindow.close();
            }
          }
        }
      }
    });
  });
</script>

推荐答案

如果您未手动设置<div>的大小,则Google Map将以不可见的div呈现.极易使人烦恼的错误.

If you don't set the size of the <div> manually, the Google Map will render in a div that won't be visible. A highly irritating error to hunt down.

尝试设置div的大小:

Try setting the size of the div:

<div id="yourID" style="width:400px; height:400px;"></div>

并包括您设置了要使用的脚本的任何ID.这就是为什么@geocodezip使用该代码会获得正确结果的原因-实际上,您只是看不到它.

and include whatever ID you have the script set to operate with. That may be why @geocodezip got proper results with the code - as you are, you just can't see it.

这篇关于Google Map API未显示的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆