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.

Answer 2

The issue may be that Google maps isn't ready yet. You have used jQuery ready functions, but I suggest you instead use a combination of both.

Please post up a fiddle or example so we can investigate further

Answer 3

I had the same problem and found that it was due to multiple jquery references.

My _layout.cshtml was loading jquery via the following line in the body section: @Scripts.Render("~/bundles/jquery") @RenderSection("scripts", required: false)

It seems that this was effectively overwriting the reference I had in my view. As it is preferable to load the reference in just one place, I removed it from the view however I then got an error that jQuery wasnt defined. I had to move the @Scripts.Render from the body section (placed there by nuget) to the section and everything worked fine.

So if you get the same error, view the page and do a 'view source'. See if there are multiple jquery script references.

This thread gave me the clue : "gmap is not a function" when using Google's map api