Javascript for (var i = 0; i < numMarkers; i++) Not Working

JavaScript
1

Can someone help me below, i have a js script google map api3, the script is to select criteria from droppdown and if the criteria match the one in json file (data.json) then it will display the marker in google map based on json data.

First category is working (value =130), if i add 2 more category it’s not working (Jacob & Tay)

HTML:

 option value="130" selected="selected">KOH</option>
 option value="JACOB" >JACOB</option>
 option value="TAY" >TAY</option>"

JS:

  var numMarkers = $('nummarkers').value;
 for (var i = 0; i < numMarkers; i++) {
   var titleText = speedTest.pics[i].photo_title;  //-----------
  if (titleText === '') {
    titleText = 'No title';
         marker = gmarkers1[i];
 }
2

urm. Right.

We’re going to need a bit more information.

For starters, what row in your data do you expect “JACOB” to match?

3

Hi, in my json file, i have long list as below (i want to match “photo_file_url” with dropdown selection list), any idea what went wrong with my code? i feel that the dropdown category is missing in js script.

{
	"nummarkers": "xxxx",
	"photo_id": "99051",
	"photo_title": "AKSARA",
	"profile": "POE Local",
	"latitude": "1.47201",
	"longitude": "103.76438",
	"photo_url": "",
	"width": "500",
	"height": "300",
	"photo_file_url": "JACOB",
	"owner_id": "PRESTIGE",
	"owner_url": "Never",
	"owner_name": "HENG",
	"upload_date": "ST6022 - JB TOWN",
	"GAR_RANK": "J19/T72_G237",
	"GA": "237",
4

Please post full code. So far you haven’t even posted a single full chunk of code. All 3 examples are incomplete.

5

Hi, my code is very long and messy and if you don’t mind i enclosed below.

I also put my project at this url : https://360.yo.fr/mapcluster/map3am

The problem is when select dropdown “KOH” suppose there are 130 markers but only displayed 3.

If select other dropdown (Jacob or Tay), it will filter according to the json file criteria based on “photo_file_url” but only displayed some markers also not correct (no. of markers)

Hope this got better explanation on my question.

function $(element) {
        return document.getElementById(element);
      }

      var speedTest = {};

      speedTest.pics = null;
      speedTest.map = null;
      speedTest.markerClusterer = null;
      speedTest.markers = [];
      speedTest.infoWindow = null;


      speedTest.init = function() {
        var latlng = new google.maps.LatLng(1.525420, 103.712070);
        var options = {
          'zoom': 10,
          'center': latlng,
          'mapTypeId': google.maps.MapTypeId.ROADMAP
        };


        speedTest.map = new google.maps.Map($('map2'), options);

        speedTest.pics = data.photos;
        var useGmm = document.getElementById('usegmm');
        google.maps.event.addDomListener(useGmm, 'click', speedTest.change);

        var numMarkers = document.getElementById('nummarkers');
        google.maps.event.addDomListener(numMarkers, 'change', speedTest.change);

        speedTest.infoWindow = new google.maps.InfoWindow();

        speedTest.showMarkers();
      };



      speedTest.showMarkers = function() {
        speedTest.markers = [];
        var type = 1;
        if ($('usegmm').checked) {
          type = 0;
        }

        if (speedTest.markerClusterer) {
          speedTest.markerClusterer.clearMarkers();
        }

        var panel = $('markerlist');
        panel.innerHTML = '';

        //............................................................

        var numMarkers = $('nummarkers').value;

        //  category
        for (var i = 0; i < numMarkers.length; i++) {


          var titleText = speedTest.pics[i].photo_title; //-----------
          if (titleText === '') {
            titleText = 'No title';
            marker = gmarkers1[i];

          }

          var item = document.createElement('DIV');
          var title = document.createElement('A');
          title.href = '#';
          title.className = 'title';
          title.innerHTML = titleText;

          item.appendChild(title);
          panel.appendChild(item);


          var latLng = new google.maps.LatLng(speedTest.pics[i].latitude,
            speedTest.pics[i].longitude);

          var imageUrl = 'http://chart.apis.google.com/chart?cht=mm&chs=24x32&chco=' +
            'FFFFFF,008CFF,000000&ext=.png';
          var markerImage = new google.maps.MarkerImage(imageUrl,
            new google.maps.Size(24, 32));


          //var category = marker[4]; //------------>23

          var marker = new google.maps.Marker({
            'position': latLng,
            'icon': 'images/marker1.png',
            //     category: category, //------------>23

          });

          var fn = speedTest.markerClickFunction(speedTest.pics[i], latLng);
          google.maps.event.addListener(marker, 'click', fn);
          google.maps.event.addDomListener(title, 'click', fn);
          speedTest.markers.push(marker);
        }

        window.setTimeout(speedTest.time, 0);
      };

      speedTest.markerClickFunction = function(pic, latlng) {
        return function(e) {
          e.cancelBubble = true;
          e.returnValue = false;
          if (e.stopPropagation) {
            e.stopPropagation();
            e.preventDefault();
          }

          var did = pic.photo_id;
          var owner_id = pic.owner_id
          var title = pic.photo_title;
          var url = pic.photo_url;
          var fileurl = pic.photo_file_url;

          var update = pic.upload_date;

          var flex = pic.flexcode
          var RANK = pic.GAR_RANK

          var wall = pic.wall
          var counter = pic.counter
          var incounter = pic.incounter
          var ceiling = pic.ceiling

          var nhc = pic.nhc

          var red = pic.red_outlet
          var profile = pic.profile
          var star_p = pic.star_p
          var star_q = pic.star_q
          var star_b = pic.star_b
          var star_s = pic.star_s
          var star_l = pic.star_l

          var star_overall = pic.star_overall


          var H1 = pic.H1
          var H2 = pic.H2
          var H3 = pic.H3
          var H4 = pic.H4
          var H5 = pic.H5
          var H6 = pic.H6

          var F1 = pic.F1
          var F2 = pic.F2
          var F3 = pic.F3
          var F4 = pic.F4
          var F5 = pic.F5
          var F6 = pic.F6


          var infoHtml = '<div class="info">' + '<b>' + '1.Prepaid Code: ' + '</b>' + did + '<br/>' + '<b>' + '2.Name: ' + '</b>' + title + '<br/>' + '<b>' + '3.Class: ' + '</b>' + owner_id + '<br/>' + '<b>' + '4.AM: ' + '</b>' + fileurl +

            '<BR/>' +

            '<b>' +
            '5.DAE: ' + '</b>'


            +
            pic.owner_name +


            '<b>' +
            '<BR/>6.AT: '

            +
            '</b>' + update +

            '<BR/>' +

            '-----------------------------------------------------' +
            '<br/>' + 'This dealer is ' + '<font color="red">' + '<b>' + pic.owner_url + '</b>' + '</b>' + '</font>' +

            '<br/>' + '<b>' + '7.Flex code: ' + '</b>' + flex +

            '<br/>' + '<b>' + '8.Red Outlet: ' + '</b>' + red +

            '<br/>' + '<b>' + '9.Profile: ' + '</b>' + profile +

            '<BR/>' +

            '-----------------------------------------------------' +

            '<BR/>' +

            '<font color="red">' +

            'KOH Rating : ' + star_overall + "/10" + '</b>' + '</font>' +

            '<br/>' + 'Product Range ' + '<img src="https://www.360.yo.fr/mapcluster/images/' + star_p + 's' + '"/>' +


            '<br/>' + 'Sales Quality ' + '<img src="https://www.360.yo.fr/mapcluster/images/' + star_q + 's' + '"/>' +

            '<br/>' + 'Branding ' + '<img src="https://www.360.yo.fr/mapcluster/images/' + star_b + 's' + '"/>' +

            '<br/>' + 'Good Location ' + '<img src="https://www.360.yo.fr/mapcluster/images/' + star_l + 's' + '"/>' +

            '<br/>' + 'Sustainability ' + '<img src="https://www.360.yo.fr/mapcluster/images/' + star_s + 's' + '"/>' +


            '<BR/>' +

            '<BR/>' + '<font color="red">' +
            '1.ShopFront ' + '</font>' +
            '</h3><div class="info-body">' +
            '<a href="' + url + '" target="_blank"><img src="' +
            url + '" class="info-img"   onerror="imgError(this);"/></a></div>'


            +
            '<a href="' + wall + '"target="_blank">' + '2.Wall' + '</a>' +
            ' | '

            +
            '<a href="' + counter + '"target="_blank">' + '3.Counter' + '</a>' +
            ' | '

            +
            '<a href="' + incounter + '"target="_blank">' + '4.InCounter' + '</a>' +
            ' | '

            +
            '<a href="' + ceiling + '"target="_blank">' + '5.Ceiling' + '</a>'


            +
            '<BR/>' + '<BR/>' +



            '</a></div></div>';

          speedTest.infoWindow.setContent(infoHtml);
          speedTest.infoWindow.setPosition(latlng);
          speedTest.infoWindow.open(speedTest.map);
        };
      };

      speedTest.clear = function() {
        $('timetaken').innerHTML = 'cleaning...';
        for (var i = 0, marker; marker = speedTest.markers[i]; i++) {
          marker.setMap(null);
        }
      };

      speedTest.change = function() {
        speedTest.clear();
        speedTest.showMarkers();
      };

      speedTest.time = function() {
        $('timetaken').innerHTML = 'timing...';
        var start = new Date();
        if ($('usegmm').checked) {
          speedTest.markerClusterer = new MarkerClusterer(speedTest.map, speedTest.markers, {
            imagePath: 'images/m'
          });
        } else {
          for (var i = 0, marker; marker = speedTest.markers[i]; i++) {
            marker.setMap(speedTest.map);
          }
        }

        var end = new Date();
        $('timetaken').innerHTML = end - start;



      };

      google.maps.event.addDomListener(window, 'load', speedTest.init);


      var img = new Image();
      var div = document.getElementById('map2');

      img.onload = function() {
        div.appendChild(img);
      };

      img.src = 'images/m1'
6

[off-topic]
@mychhiew, when you post code in the forum, you need to format it. To do so you can either select all the code and click the </> button, or type 3 backticks ``` on a separate line both before and after the code block.

I have done it for you this time.
[/off-topic]

7

Thank you so much

8

After tying to change some code still not working, is it below line got problem?

for (var i = 0; i < numMarkers; i++)

9

The values of your other categories are “JACOB” and “TAY”. A loop can’t go from 0 to “JACOB”.

10

Hi @mychhiew, if you open the console of your browser dev tools you’ll i.a. see an

Screenshot%20from%202019-06-09%2012-08-39

11

Hi i am pretty new to javascript and this give me some idea how to troubleshoot the problem,thanks.

After i added this code var gmarkers1 = [];, i can see the markers now is showing though it’s still having problem not displaying based on the drop down list criteria.

12

Hi, thanks for pointing out and i am googling with more info now; i found below coding (https://jsfiddle.net/emux5evL/5/) and it’s quite similar to what i want and am figuring out how to put in my coding:

				$(".marker_filter").click(function() {
          if ($(".marker_filter").length > 0)
            var category = $(this).val();
                  for (i = 0; i < gmarkers1.length; i++) {
              		marker = gmarkers1[i];
                  var setVisible = false;
                  for(j = 0; j < marker.category.length;j++)
                  {
                  	 setVisible = $("#"+marker.category[j]).is(":checked") || setVisible
                  }
                   marker.setVisible(setVisible);
              }
        });
13

Hi i got another example here: https://jsfiddle.net/peter/drytwvL8/

How can i integrate this code in my project?

14

anyone got any idea how to fix this? would appreciate you help. thank you.

15

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.