Object doesn't support property or method 'setMap'

Question

I am designing my code with JqueryMobile, and now I get this weird error (that I did not get before): Object doesn't support property or method 'setMap'. As a result, getCurrentPosition is not working properly, and I can't get the actual user's position.

this is the code with the links:

<link href="omgapp-theme/themes/jquery.mobile.icons.min.css" rel="stylesheet" />
<link href="omgapp-theme/themes/omgapptheme.css" rel="stylesheet" />
<link href="omgapp-theme/themes/omgapptheme.min.css" rel="stylesheet" />


<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile.structure-1.4.5.min.css" />
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>


<!-- menu -->
<link rel="stylesheet" href="assets/css/styles.css" />
<link rel="stylesheet" href="assets/font-awesome/css/font-awesome.css" />


<!--autocomplete-->
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>


<!--**************************************popup info************************************-->
<link href="the-modal-master/demo-modals.css" rel="stylesheet" />
<script src="the-modal-master/jquery.the-modal.js"></script>
<link href="the-modal-master/the-modal.css" rel="stylesheet" />


<script src="AjaxCall.js"></script>

<style type="text/css">
    /*This Css code  makes the maps work with jQueryMobile*/

    #content {
        padding: 0 !important;
        position: absolute !important;
        top: 40px !important;
        right: 0 !important;
        bottom: 40px !important;
        left: 0 !important;
    }

    #gpsIcon {
        height: 2em;
    }

    html, body, #map-canvas {
        height: 450px;
        margin: 0px;
        padding: 0px;
    }

    html, body, #map-canvas1 {
        height: 450px;
        margin: 0px;
        padding: 0px;
    }

    html, body, #map-canvas2 {
        height: 450px;
        margin: 0px;
        padding: 0px;
    }

    p.marker {
        color: black;
        direction: rtl;
        font-family: Arial;
    }

    [data-role=footer] {
        bottom: 0;
        position: absolute !important;
        top: auto !important;
        width: 100%;
    }
</style>

and this is the part that creates the error:

function getCurrentPosition_Success(position) {

        if (counter > 0)
            for (var i = 0; i < markers.length; i++) {
                markers[i].setMap(null);
                markers = [];
                counter = 0;
            }

        co = position.coords; // set a short variable for conviniece
        var pos = new google.maps.LatLng(co.latitude, co.longitude);
        var marker1 = {//the radius marker
            strokeColor: '#0000FF',
            strokeOpacity: 0.5,
            strokeWeight: 2,
            fillColor: '#0000FF',
            fillOpacity: 0.35,
            map: map,
            center: pos,
            radius: 5,
            title: 'You Are Here',
        };
        CircleRadius = new google.maps.Circle(marker1);
        markers.push(marker1);
        counter++;
        map.setCenter(pos); // center the map around the position of the user

        request = {
            nodeNumber: num,//destNum
            posX: co.latitude,
            posY: co.longitude
        }
        getDistance(request, getDistanceSuccessCB, getDistanceErrorCB);

    }

Answer 1

You are setting marker1 as a Javascript object and not as a google maps marker object, and so it doesnt have the setMap() method that google markers do. To set it as a maps marker object you need to use

var marker1 = new google.maps.Marker({