javascript - マップの読み込み後に Google マップのマーカーが表示されない

Question

jquery.ui.map を使用して Google マップにマーカーをロードします。これは私のコードの一部です。

            var ip = new google.maps.LatLng(lat, longt);


            var mapOptions = {
                zoom:     4,
                center:    ip,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            }

            $('#map_canvas').gmap(mapOptions);


            var marker = $('#map_canvas').gmap('addMarker', {
                'position': ip, 
                'bounds': true,
                'title':'Your location'
            });

マップの読み込み中はマーカーが表示されますが、すべてが読み込まれるとマーカーが消え、マップ上にマーカーが表示されません。このスクリーン ショットを見ると、マーカーがあることがわかります。 （カーソルを合わせるとマーカーのタイトルが表示されるため）しかし、表示されません...

スクリーンショット: http://s15.postimg.org/5zlsbxwhn/scmap.jpg

デモページ: http://bev.dev.beardo.co/encontre/