0

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>
tourdownunder
  • 1,779
  • 4
  • 22
  • 34
  • Are you including the necessary script files?? – Sushanth -- Oct 19 '12 at 00:12
  • What happens if you use the plugin to create the map?: $('#map_canvas').gmap({ 'center': '-31.952,115.857' }); – Mere Development Oct 19 '12 at 00:25
  • It looks like that `jquery-ui-map` files are not loaded so a jQuery object like `$('#map_canvas')` has no such a method as `gmap`. – The Alpha Oct 19 '12 at 00:27
  • The `gmap` method will be available only after the `gmap` plugin has been loaded, unless there will be this error. – The Alpha Oct 19 '12 at 00:29
  • @MereDevelopment The map no longer loads with the same error message. I replaced all code in my initialize method with the single line you suggested. – tourdownunder Oct 19 '12 at 00:32
  • @SheikhHeera yes. It is a file that I have marked as content in visual studio so that I'm able to download it if I access http://localhost:7905/Data/Australia-WA-Perth.json – tourdownunder Oct 19 '12 at 00:32
  • Well, I'm sure that your `gmap` plugin is not loaded. – The Alpha Oct 19 '12 at 00:34
  • "View source" in the browser and see what is actually served. Is the script tag for the plugin present? – Beetroot-Beetroot Oct 19 '12 at 00:36
  • @Sushanth-- I believe so I have used the same Java Script includes with the HTML prototype. I have notices that the MVC4 project will also use the Bundling functionality and add a javascript files in the Script folder. I'll delete old Jquery script files and try again. – tourdownunder Oct 19 '12 at 00:37
  • I'm struggling with the same problem. Html prototype works fine also. I can load a map in my MVC4 project using the google api's fine, but cannot seem to do it using gmap. I tried using a button on the form to call gmap but get the same problem. I have confirmed in Chrome that jquery.ui.map.js is loaded. Did you eventually find a solution @darwindave – mikecamimo Dec 11 '12 at 00:01

3 Answers3

2

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.

Beetroot-Beetroot
  • 18,022
  • 3
  • 37
  • 44
0

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

lededje
  • 1,859
  • 1
  • 16
  • 25
  • I have used your suggestion and used the following event to know that the google maps have loaded. Using an answer described here: http://stackoverflow.com/questions/832692/how-to-check-if-google-maps-is-fully-loaded. Unfortunately same issue. – tourdownunder Oct 19 '12 at 01:09
  • Have you tried setting a 500ms pause before generating the map. Tell me if this works (it's not a fix but it will help with the debugging) – lededje Oct 19 '12 at 01:13
  • @lededgi I tested your theory using a button that will call get markers each time it is hit. Unfortunately though the google map is fully loaded it has the same error each time it is hit. Note: I did try pausing though in js it seems complicated and any examples I found did my head in. – tourdownunder Oct 19 '12 at 01:59
0

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

Community
  • 1
  • 1
mikecamimo
  • 246
  • 4
  • 9