Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
280 views
in Technique[技术] by (71.8m points)

google maps api 3 - Googlemap shows grey box on all browsers

I have a simple test site to show google map here:

<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script src="http://maps.googleapis.com/maps/api/js?libraries=places,geometry"></script>
<script src="js/GoogleMap/GoogleMap_thread_view.js"></script>
<link href="js/GoogleMap/GoogleMap.css" rel="stylesheet" />
<script type="text/javascript">$(document).ready(function () {
    $("#googlemap").GoogleMap({addr: "105K Ho Thi Ky Phuong 1 Quan 10 Ho Chi Minh", lat: 43.37049234, lng: 30.3480382});
    /*var myLatlng = new google.maps.LatLng(-25.363882,131.044922);
  var mapOptions = {
    zoom: 4,
    center: myLatlng
  }
  var map = new google.maps.Map(document.getElementById('googlemap'), mapOptions);

  var marker = new google.maps.Marker({
      position: myLatlng,
      map: map,
      title: 'Hello World!'
  });*/
});</script>
</head>
<body style="width: 1000px; height: 600px;">
    <div id="googlemap" style="width: 1000px; height: 600px; ">abc</div>
</body>
</html>

The page just shows grey div without map. I searched around on this site but nothing works (resize window event, overflow: visible, width: 100% ... etc ...)

The thing is when I uncomment the Google's sample code, it works. So there must be something wrong with my script, file GoogleMap_thread_view.js

(function ($) {
var map, place, myMarker;
$.widget('4phuong.GoogleMap', {
    options: {
        addr: 'unknown',
        lat: 0,
        lng: 0,
        zoom: 2
    },

    _create: function () {
        var $widget = this;
        $widget.element.children().hide();
        $widget._$container = $('<div class="googlemap-container"><div class="map-canvas"></div></div>');
        $widget.element.append($widget._$container);
        var mapOptions = {
            center: new google.maps.LatLng($widget.options.lat, $widget.options.lng),
            zoomControlOptions: {
                style: google.maps.ZoomControlStyle.SMALL,
                position: google.maps.ControlPosition.LEFT_BOTTOM
            },
            mapTypeControl: false,
            streetViewControl: false
        };
        map = new google.maps.Map(document.getElementsByClassName('map-canvas')[0], mapOptions);

        myMarker = new google.maps.Marker({
            map: map,
            title: $widget.options.addr,
            position: new google.maps.LatLng($widget.options.lat, $widget.options.lng)
        });
    },

    destroy: function () {
        this._$container.remove();
        $.Widget.prototype.destroy.apply(this, arguments);
        this.element.show();
    },

    control: function () {
        return this._$control;
    }
});
}(jQuery));

Could someone please tell me where I am wrong?

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Answer

0 votes
by (71.8m points)

I know the reason. It's because I didn't give value to the field "zoom" when creating map. It should look like below

        var mapOptions = {
            center: new google.maps.LatLng($widget.options.lat, $widget.options.lng),
            zoom: $widget.options.zoom,
            zoomControlOptions: {
                style: google.maps.ZoomControlStyle.SMALL,
                position: google.maps.ControlPosition.LEFT_BOTTOM
            },
            mapTypeControl: false,
            streetViewControl: false
        };

It's really stupid as Google should make default value for it.


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...