谷歌地圖沒有顯示我的位置

Question

我想在Google地圖上顯示一個位置，但是我不知道我的錯在哪里。 沒有顯示任何東西：

   <div id="map-canvas" style="width:100%; height:300px;">

   </div>

.
.
.

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
      <script>
            // Google map
            if ($('#map-canvas').length) {
                        var
                        GOOGLE_MAP_LAT = 40.7564971,
                        GOOGLE_MAP_LNG = -73.9743277;
                var map,
                        service;
                jQuery(function($) {
                    $(document).ready(function() {
                        var latlng = new google.maps.LatLng(GOOGLE_MAP_LAT, GOOGLE_MAP_LNG);
                        var myOptions = {
                            zoom: 14,
                            center: latlng,
                            mapTypeId: google.maps.MapTypeId.ROADMAP
                        };

                        map = new google.maps.Map(document.getElementById("map-canvas"), myOptions);


                        var marker = new google.maps.Marker({
                            position: latlng,
                            map: map
                        });
                        marker.setMap(map);


                        $('a[href="#google-map-tab"]').on('shown.bs.tab', function(e) {
                            google.maps.event.trigger(map, 'resize');
                            map.setCenter(latlng);
                        });
                    });
                });
            }

        </script>
</body>

更新

我的控制台消息：

Using //@ to indicate sourceMappingURL pragmas is deprecated. Use //# instead jquery.js:1:0
Password fields present on an insecure (http://) page. This is a security risk that allows user login credentials to be stolen.[Learn More] <unknown>
SyntaxError: expected expression, got '<' myjs.js:1:0
TypeError: $(...).position(...) is undefined
 custom.js:308:20
Use of getPreventDefault() is deprecated.  Use defaultPrevented instead.

Answer 1

我認為您需要包括jquery庫，因為您使用的是$（document）.ready（function（）。我已經通過添加jquery庫來更新了您的代碼，請嘗試以下代碼，希望它可以工作。

    <div id="map-canvas" style="width:100%; height:300px;">

    </div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
    <script>
        // Google map
        if ($('#map-canvas').length) {
                    var
                    GOOGLE_MAP_LAT = 40.7564971,
                    GOOGLE_MAP_LNG = -73.9743277;
            var map,
                    service;
            jQuery(function($) {
                $(document).ready(function() {
                    var latlng = new google.maps.LatLng(GOOGLE_MAP_LAT, GOOGLE_MAP_LNG);
                    var myOptions = {
                        zoom: 14,
                        center: latlng,
                        mapTypeId: google.maps.MapTypeId.ROADMAP
                    };

                    map = new google.maps.Map(document.getElementById("map-canvas"), myOptions);


                    var marker = new google.maps.Marker({
                        position: latlng,
                        map: map
                    });
                    marker.setMap(map);


                    $('a[href="#google-map-tab"]').on('shown.bs.tab', function(e) {
                        google.maps.event.trigger(map, 'resize');
                        map.setCenter(latlng);
                    });
                });
            });
        }

    </script>