谷歌地图加载在不同的拉长从AJAX调用

我有一个很奇怪的问题，我会尽力解释。

我有一个单页的骨干应用程序，它通过AJAX加载新页面。

其中一个页面(联系我们页面)是一个全屏谷歌地图，顶部放置了一个联系表单。

我遇到的问题是，当从特定页面导航时，地图加载的位置有问题。

以下是有效和无效的页面:

Home         -> Contact Us = Map loads in correct location
Finding True -> Contact Us = Map loads aprox 5km north of correct location
Work         -> Contact Us = Map loads in correct location
People       -> Contact Us = Map loads aprox 2km north of correct location
Social       -> Contact Us = Map loads in correct location

我不知道为什么Finding True和People页面导致地图加载不正确。每次都运行相同的代码。

以下是Contact Us的视图:

app.ContactUsView = Backbone.View.extend({
    el: '#contact_us',
    events: {
        'submit #contact_form': 'submitForm'
    },
    initialize: function() {
        this.$el = $(this.el);
        this.$form = $('#contact_form');
        this.setMetaData('Contact Us | ' + app.site_name, null, null);
        this.setCurrentPageHeight(this.$el);
        app.script_gmaps = (app.script_gmaps ? this.setUpMap() : $.getScript('https://maps.googleapis.com/maps/api/js?sensor=false&key=AIzaSyDU64cYJcx0W2jFuv0Jh439Vgrqta0OKTg&callback=app.contact_us_view.setUpMap', function(){}));
        app.script_jquery_validate = (app.script_jquery_validate ? this.setClientSideValidation() : $.getScript('js/vendor/jquery.validate.min.js', function(){
            app.contact_us_view.setClientSideValidation();
        }));
    },
    setClientSideValidation: function () {
        this.$form.validate();
    },
    submitForm: function(event) {
        event.preventDefault();
        this.$form.find('.return').html('Sending your message...');
        $.ajax({
            dataType: "json",
            type: "POST",
            url: 'send.php',
            data: this.$form.serialize(),
            success: function(data){
                if (data.status == 'error') {
                    app.contact_us_view.showErrorMessage(data);
                } else {
                    app.contact_us_view.messageSent(data);
                }
            }
        });
    },
    showErrorMessage: function (data) {
        this.$form.find('.return').html(data.message).parent().addClass('error');
    },
    messageSent: function (data) {
        this.$form.find('input[type!=submit], textarea').val('');
        this.$form.find('.return').html(data.message).parent().removeClass('error');
    },
    setUpMap: function() {
        if($('#map_canvas').length === 0) return false;
        var mapLatLong = new google.maps.LatLng(51.5174456, -0.1305081);
        var markerLatlng = new google.maps.LatLng(51.5170951, -0.1367416);
        var mapOptions = {
            zoom: 16,
            center: mapLatLong,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        }
        var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
        var contentString = '<div id="content">'+
                                '<div id="siteNotice">'+
                                '</div>'+
                                '<h1 id="firstHeading" class="firstHeading">BrocklebankPenn</h1>'+
                                '<div id="bodyContent">'+
                                    '<p>5th floor, 58-60 Berners Street,<br />London,<br />W1T 3NQ,<br />United Kingdom</p>'+
                                    '<p>+44 (0)20 3137 7034</p>'+
                                '</div>'+
                            '</div>';
        var infowindow = new google.maps.InfoWindow({
            content: contentString
        });
        var marker = new google.maps.Marker({
            position: markerLatlng,
            map: map,
            title: 'BrocklebankPenn'
        });
        google.maps.event.addListener(marker, 'click', function() {
            infowindow.open(map,marker);
        });
        infowindow.open(map,marker);
        return true;
    },
    removeView: function() {
        this.$el.parent().remove();
        this.remove();
    }
});

app.FindingTrueView = Backbone.View.extend({
    el: '#finding_true',
    initialize: function(){
        this.$el = $(this.el);
        this.setMetaData('Finding True | ' + app.site_name, null, null);
        $(window).scroll(this.showOverlay);
        this.showOverlay();
    },
    showOverlay: function() {
        var height = $(window).scrollTop() + $(window).height();
        var reveal_offset = $('.section.reveal').offset().top + ($('.section.reveal').height() * 0.7);
        var simplify_offset = $('.section.simplify').offset().top + ($('.section.simplify').height() * 0.7);
        var amplify_offset = $('.section.amplify').offset().top + ($('.section.amplify').height() * 0.7);
        var threesteps_offset = $('.three-steps').offset().top + ($('.three-steps').height() * 2.5);
        if (height >= threesteps_offset) {
            $('.three-steps .fadein').addClass('active');
        }
        if (height >= reveal_offset) {
            $('.section.reveal').addClass('show_overlay');
        }
        if (height >= simplify_offset) {
            $('.section.simplify').addClass('show_overlay');
        }
        if (height >= amplify_offset) {
            $('.section.amplify').addClass('show_overlay');
        }
        if($(window).scrollTop() > (0.25 * $('#current_page article').height())) {
            $('.page-header .scroll-to-content').addClass('inactive');
        } else {
            $('.page-header .scroll-to-content').removeClass('inactive');
        }
    },
    removeView: function() {
        $(window).unbind('scroll');
        this.$el.parent().remove();
        this.remove();
    }
});

下面是People的视图:

app.PeopleView = Backbone.View.extend({
    el: '#people',
    initialize: function(){
        if(!app.script_linkedIn) {
            app.script_linkedIn = $.getScript('//platform.linkedin.com/in.js');
        }
    },
    removeView: function() {
        this.$el.parent().remove();
        this.remove();
    }
});

如果有人能帮忙，那将是惊人的!

谢谢,卢克。

所以我正在逐步通过代码，并确保google.maps对象每次都有相同的Long和Lat。

遗憾的是，Long and Lat每次都是相同的，所以我真的不明白为什么这个在不同的位置加载