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);
        }
});

Are you sure the template is rendering correctly? Some object is expected to be there but isn't. — Vidya, Nov 11 '13 at 04:26
sure, my web template and the map canvas renders correctly. i just wonder why i got this error when using Search and not when i try other functions — M Rijalul Kahfi, Nov 11 '13 at 04:28

score 0 · Accepted Answer · answered Nov 11 '13 at 08:35

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

                    }
                });

JQuery UI Map Search Not Working

1 Answers1