JQuery UI Map Search Not Working

Question

I was trying to use JQuery UI Map on my project. All the example codes available there seem to work properly even when i use the sample code on my project. However i didn't find example for searching a location by it address. My intention is to find longitude and latitude for a given address text.

Then, i found this tutorial, on Search section, i used the sample code provided there. But i faced error saying

Uncaught TypeError: Cannot call method 'apply' of undefined.

What does probably cause this error or it looks like there are some bugs in the library? I've made sure i've included these libs, because i've succeed when trying other examples.

 <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
<script type="text/javascript" src="{{ asset('<PATH>/jquery-ui-map/ui/jquery.ui.map.js') }}"></script>

This is the code snippet i was using from the tutorial

    $('#map_canvas').gmap().bind('init', function() {
        $('#map_canvas').gmap('search', { 'address': 'Stockholm' }, function(results, status) {
                if ( status === 'OK' ) {
                        $('#map_canvas').gmap('get', 'map').panTo(results[0].geometry.location);
                }
        });
}});
$('#map_canvas').gmap({'callback':function() {
        var self = this;
        self.search({ 'address': 'Stockholm' }, function(results, status) {
                if ( status === 'OK' ) {
                        self.get('map').panTo(results[0].geometry.location);
                }
        });
}});
$('#map_canvas').gmap('search', { 'address': 'Stockholm' }, function(results, status) {
    if ( status === 'OK' ) {
                $('#map_canvas').gmap('get', 'map').panTo(results[0].geometry.location);
        }
});

Answer 1

I indeed seems to have bugs. I've tried and get the same. You might try other workaround, such as using library from Google Maps API instead of that library.

The you can do like this.

var geocoder = new google.maps.Geocoder();
                geocoder.geocode({ 'address': node.data.address }, function(results, status) {
                    if (status == google.maps.GeocoderStatus.OK) {
                        var latitude = results[0].geometry.location.nb;
                        var longitude = results[0].geometry.location.ob;
                        var zoom = $('#infovis').gmap('option', 'zoom');
                        // do something with latitude and longitude

                    }
                });