Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

"marker.getPosition is not a function" while markerclustering [duplicate]

The result is giving me this error: "TypeError: marker.getPosition is not a function".

I Did multiple search about the markerClustering but couldn't find any explanation for error!

My variable myMarkers is an array as asked in the documentation of MarkerClusterer.

If someone could help me, it would be much apreciated :)

function initMap(){

    var maDataBase = [];
    var myMarkers = [];

    $.getJSON( "https://api.jcdecaux.com/vls/v1/stations?contract=MY-CONTRACT&apiKey=MY-API-KEY", function( data ) {
        $.each( data, function( key, val ) {
        maDataBase.push(val);
        });
    }).done(function(){ 

        var bounds = new google.maps.LatLngBounds();
        var myMap = $('.main')[0];
        var mapOptions = {
            mapTypeId : google.maps.MapTypeId.ROADMAP
        };

        var googleMap = new google.maps.Map(myMap, mapOptions);

        for (var i = 0; i < 50; i++){

            myMarkers.push(new google.maps.LatLng(maDataBase[i].position.lat, maDataBase[i].position.lng));

            for (var x = 0, marker; x < myMarkers.length;x++){

                bounds.extend(myMarkers[i]);

                marker = new google.maps.Marker({
                    map : googleMap,
                    position: myMarkers[i],
                });
            }

        };

        googleMap.fitBounds(bounds);
        var markerCluster = new MarkerClusterer(googleMap, myMarkers,{imagePath: '../img/m'});

    });

};
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>JCDecaux</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" media="screen" href="css/main.css" />
</head>
<body>
    <div class="main" id="main">

    </div>




    <script async defer src="https://maps.googleapis.com/maps/api/js?key=MY-API-KEY&callback=initMap"></script>
    <script src="js/markerclusterer.js"></script>

    <script src="js/jquery.min.js"></script>

    <script src="js/main.js"></script>
</body>
</html>
like image 563
Romario Sobreira Avatar asked Aug 16 '26 18:08

Romario Sobreira


1 Answers

myMarkers isn't an array of google.maps.Markers. The entries don't have a getPosition method. Save the google.maps.Marker objects you create in an array and add that to the MarkerClusterer.

like image 191
geocodezip Avatar answered Aug 18 '26 08:08

geocodezip



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!