需要帮助弃用谷歌地图API代码转换为V3

Question

I am working on a Foursquare/Google Maps API integration and I am using a script I found on GitHub as a starting point. The issue is that this script was written 3 years ago and uses a very early version of jQuery Mobile to render the map. I want to get rid of the jQuery Mobile library and use updated Google API V3 code to render the map.

This is the script using the old library:

jQuery('#map_canvas').gmap( { 
    'center': new google.maps.LatLng(39.828175, -98.5795), 
    'zoom': 4,  
    'streetViewControl': false, 
    'mapTypeControl': false,
    'mapTypeId': google.maps.MapTypeId.ROADMAP,
    'callback': function (map) {
        if ( navigator.geolocation ) {
            navigator.geolocation.getCurrentPosition ( 
                function( position ) {
                    jQuery.userloc = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
                    addFoodTruckMarker(jQuery.userloc, 'userloc.png', '<p>You are here.</p>');
                    map.panTo(jQuery.userloc);
                    loadFoodTrucks({lat: position.coords.latitude, lng: position.coords.longitude, userloc: jQuery.userloc, zoomtotrucks: true});
                },
                function( error ) {
                    jQuery.mobile.pageLoading( true );
                    alert("Sorry, couldn't find your location.");
                },
                {
                    enableHighAccuracy: true, 
                    maximumAge: (1000 * 60 * 10), 
                    timeout: (1000 * 20)
                }
            );
        }
    }
});

And here is the code that sets the markers:

addFoodTruckMarker = function (location, icon, content) {
    jQuery('#map_canvas').gmap('addMarker', { 
        'position': location,
        'icon': icon
    },
    function(map, marker){
        jQuery('#map_canvas').gmap('addInfoWindow', { 
            'position': jQuery.userloc, 
            'content': content
            }, 
            function(iw) {
                jQuery(marker).click(function() {
                    iw.open(map, marker);
                    map.panTo(marker.getPosition());
                });                                                                                                                                                                                                                               
            }
        );
    });
}

Here is my updated script so far. This is working in terms of loading the map, but it's not putting the user location or the Foursquare venue location on the map. I'm assuming it has something to do with the callback(which I just copied into the example code from the Google API V3 docs for the time being):

function loadMap() {
    var mapOptions = {
      center: new google.maps.LatLng(39.828175, -98.5795),
      zoom: 4,
      streetViewControl: false,
      mapTypeControl: false,
      mapTypeId: google.maps.MapTypeId.ROADMAP,
      callback: function (map) {
        if ( navigator.geolocation ) {
            navigator.geolocation.getCurrentPosition ( 
                function( position ) {
                    jQuery.userloc = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
                    addFoodTruckMarker(jQuery.userloc, 'userloc.png', '<p>You are here.</p>');
                    map.panTo(jQuery.userloc);
                    loadFoodTrucks({lat: position.coords.latitude, lng: position.coords.longitude, userloc: jQuery.userloc, zoomtotrucks: true});
                },
                function( error ) {
                    //jQuery.mobile.pageLoading( true );
                    alert("Sorry, couldn't find your location.");
                },
                {
                    enableHighAccuracy: true, 
                    maximumAge: (1000 * 60 * 10), 
                    timeout: (1000 * 20)
                }
            );
        }
      }
    };
    var map = new google.maps.Map(document.getElementById("map_canvas"),
        mapOptions);
}
google.maps.event.addDomListener(window, 'load', loadMap);

Can anyone point me in the right direction? Thanks!

Answer 1

There is no callback-option for a map(the function never will be executed).

You may implement it on your own by adding this to the end of loadMap() :

//execute callback when the map has been finished initializing
google.maps.event.addListenerOnce(map,'bounds_changed',function(){this.callback();})

But there is no need to wait for anything, you may execute the code inside callback directly (at the end of loadMap). Of course you'll also need to update addFoodTruckMarker , because it still requires jquery-ui-map

Note: libraries may be updated, there is a newer version of jquery-ui-map, the only change that is related to your code is the method addInfoWindow that has been removed, you'll need to update addFoodTruckMarker :

addFoodTruckMarker = function (location, icon, content) {
    jQuery('#map_canvas').gmap('addMarker', { 
        'position': location,
        'icon': icon
    }).click(function() {
        $('#map_canvas').gmap('openInfoWindow', { 'content': content }, this);
    }); 
}