Google Maps API需要刷新才能正常运行

时间:2016-06-22 21:19:15

标签: javascript google-maps

我的个人网站编写谷歌地图API的问题。在刷新浏览器之前,谷歌地图不起作用。以下是谷歌地图的脚本。

            <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false&v3"></script>
            <script type="text/javascript" src="<?php echo get_bloginfo('template_url'); ?>/js/mk.js"></script>         

        <script type="text/javascript"> 

        var geocoder;
        var map;
        function initialize() {
        geocoder = new google.maps.Geocoder();
        var latlng = new google.maps.LatLng(-34.397, 150.644);
        var myOptions = {
          zoom: 13,
          center: latlng,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        }
        map = new google.maps.Map(document.getElementById("map"), myOptions);
        }

        function codeAddress(address) {

        geocoder.geocode( { 'address': address}, function(results, status) {
            if (status == google.maps.GeocoderStatus.OK) {
            map.setCenter(results[0].geometry.location);
            var marker = new MarkerWithLabel({

            position: results[0].geometry.location,
            map: map,
            labelContent: address,
            labelAnchor: new google.maps.Point(22, 0),
            labelClass: "labels", // the CSS class for the label
            labelStyle: {opacity: 1.0}

            });
            } else {
                //alert("Geocode was not successful for the following reason: " + status);
              }
            });
          }

        initialize();

        codeAddress("<?php 

            global $post;
            $pid = $post->ID;

            $terms = wp_get_post_terms($pid,'ad_location');
            foreach($terms as $term)
            {
                echo $term->name." ";
            }

            $location = get_post_meta($pid, "Location", true);  
            echo $location;

         ?>");

        </script> 

我错过了脚本的任何内容吗?我没有在其上添加API,但控制台说'34;您已在此页面上多次添加Google Maps API。这可能会导致意外错误。&#34;

1 个答案:

答案 0 :(得分:2)

在将map变量传递给markerOptions之前,您需要确保初始化map变量。

一些过于热心的调试告诉我,在页面失败的时候,地图仍未定义。

The $(document).ready()通常会在body.onload之前发生,因此要么在$(document).ready(function() { ... });的最顶部调用initialize(),要么将代码初始化在那里。

此外,尽管不是绝对必要,但您应该考虑封装地图变量而不是使用全局变量。