JQUERY-UI-MAP "Uncaught TypeError: Object [object Object] has no method 'gmap' "

Question

I'm using jquery-ui-map 3.0 RC to simplify the process of using json to place markers on a google map using javascript api v3.

When I prototyped using html files it worked fine. Once I started to use embed code within an MVC4 project and debug using iis express I'd get an error in Google Chrome Developer Tools "Uncaught TypeError: Object [object Object] has no method 'gmap'.

<script type="text/javascript" src="http://maps.google.com/maps/api/js?key=MYBROWSERAPIKEYISHERE&sensor=true"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script type="text/javascript" src="../../Scripts/jquery.ui.map.js"></script>
<script type="text/javascript" src="../../Scripts/gmap3.js"></script>
<script type="text/javascript">


$(document).ready(function () {
    initialize();
});

function getMarkers() {
    // This URL won't work on your localhost, so you need to change it
    // see http://en.wikipedia.org/wiki/Same_origin_policy
    $.getJSON('../../Data/Australia-WA-Perth.json', function (data) {
        $.each(data.markers, function (i, marker) {
            $('#map_canvas').gmap('addMarker', {
                'position': new google.maps.LatLng(marker.latitude, marker.longitude),
                'bounds': true
            }).click(function () {
                $('#map_canvas').gmap('openInfoWindow', { 'content': marker.content }, this);
            });
        });
    });
}

function initialize() {
    var pointCenter = new google.maps.LatLng(-31.95236980, 115.8571791);

    var myMapOptions = {
        zoom: 17,
        center: pointCenter,
        mapTypeId: google.maps.MapTypeId.ROADMAP  //TERRAIN
    };

    var map = new google.maps.Map(document.getElementById("map_canvas"), myMapOptions);

    google.maps.event.addListenerOnce(map, 'idle', function () {
        getMarkers();
    });

}
</script>

Answer 1

You are including gmap3 but making calls to .gmap(...). The examples in the gmap3 documentation use .gmap3(...).

Also, I can find no evidence that you can initialise a map with the standard google.maps API, then add markers etc with gmap3.

As far as I can tell, there's no mechanism for mixing the two APIs, at least not in the way you are attempting.

If there is a mechanism for mixing the two APIs like this, then it would seem necessary somehow to inform gmap3 of the variable map returned by new google.maps.Map(...);. Otherwise, I'm guessing, gmap3 has no means of addressing the map that is already established.

So try re-writing your code to use 100% one API or 100% the other.