Please help! Javascript

Hello,
new to javascript, copy and pasted some text, but sidebar dosen’t seem to work…can some help?

Thank you!

Code:

<!DOCTYPE html> 
<html>
  <head>
        <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta charset="utf-8">
          <Title>Web Tool</Title>
   <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
        <div data-role="page"> 
    <div data-role="header"> 
    <br>    
    </div>
    <br>
        <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> 
        <br>
        <script>


    var map;
    var markersArray = [];  
    var infoWindow;     
    var places = [ 

['1', 40.421613,90.128422,'Name', 'yyyyyyyy', 'zzzz.png'],


    ];
    //alternate btw 7 different colored markers for this..
    var icons = [
        'zzzz.png',
        'ffff.png',
       
    ];


    // center map in middle of Nebraska
    var mapCenter = new google.maps.LatLng(40.919036, 90.924594);

    //create the map
    function createMap() {
        map = new google.maps.Map(document.getElementById("map"), {
            center: mapCenter,
            zoom: 5,
            mapTypeId: google.maps.MapTypeId.ROADMAP,
            zoomControl: true,
            streetViewControl: true,
            zoomControlOptions: {
                style: google.maps.ZoomControlStyle.LARGE
            }
        });

        //create a global infowindow to show content
        //set a maxwidth of 300 pixel
        infoWindow = new google.maps.InfoWindow({
            map: map
        });
    }

    function initMarkers() {
        for (var i=0; i<places.length; i++) {
            var place=places[i];

            var marker = new google.maps.Marker({
                position: new google.maps.LatLng(place[1], place[2],place[3]),
                map: map,

                //set icon, category as icons index 
                //outcomment this line if you just want to show the defuult icon
                icon : icons[place[5]],

                //add data from places to the marker
                title : place[0],
                category: place[3],
                content: place[4],
	icon: place[5]
            });

            //add the marker to the markersArray, used to hide/show markers
            markersArray.push(marker);
            //create a click event that shows the infowindow when a marker is clicked
            //the infowindow get latlng and content from the marker
            google.maps.event.addListener(marker, 'click', function() {
                infoWindow.setPosition(this.position);
                infoWindow.setContent(this.content);
                infoWindow.open(map);
            });
        }
    }
    //show / hide markers based on category
    //if category is 0, show all markers
function showMarkersByCategory(category) {
    for (var i=0; i<markersArray.length; i++) {
        if ((category==0) || (markersArray[i].category==category)) {
            markersArray[i].setVisible(true);
        }
    }
}
function initialize() {
    createMap();
    initMarkers();

    //init the select box where you show/hide the markers per category
    var checkbox=document.getElementById('checkbox');
    checkbox.onclick = function() {
        for (var i=0; i<markersArray.length; i++) {
            markersArray[i].setVisible(false);
        }
        var checkedBoxes = $('#checkbox > input:checkbox:checked');
        for (var i = 0; i < checkedBoxes.length; i++){
            var category = checkedBoxes[i].value;
            showMarkersByCategory(category);
        }
    }
}
    google.maps.event.addDomListener(window, 'load', initialize);




  // == rebuilds the sidebar to match the markers currently displayed ==
  function makeSidebar() {
    var html = "";
    for (var i=0; i<markers.length; i++) {
      if (markers[i].getVisible()) {
        html += '<a href="javascript:myclick(' + i + ')">' + markers[i].html + '<\/a><br>';
      }
    }
    document.getElementById("side_bar").innerHTML = html;
  }
 



   </script>-</head> 
    <div id="map" style="width:80%;height:800px;float:left;clear:none;"></div>
    <div id="side_bar" style="width:200px;height:800px;float:right;clear:none;border-style: inset;"></div>
    <div style="position: absolute; left: 5px; top: 20px; padding: 10px 10px 10px 10px;">   
            <br>
            <form id="checkbox">
            <input type="checkbox" name="" value="0">All&nbsp&nbsp
          <input type="checkbox" name="Name" value="name">Name'       
     <input type="checkbox" name="Name1" value="name1">Name1
            </form>
    </div>
    </body>
</html>

The first thing to do would be to validate your HTML at https://validator.w3.org/

When you’ve fixed the errors, see if it works then. However, copying and pasting is no way to learn…

2 Likes

Hi there cristimatu,

and a warm welcome to these forums. :winky:

My “Web Console” shows these errors…

"Google Maps JavaScript API warning: NoApiKeys https://developers.google.com/maps/documentation/javascript/error-messages#no-api-keys"  util.js:226:33
"Google Maps JavaScript API warning: SensorNotRequired https://developers.google.com/maps/documentation/javascript/error-messages#sensor-not-required"  util.js:226:33

Further reading

Google Map Error Messages

Here is your ( @Gandalf wisely suggested ), validated HTML…

<!DOCTYPE html> 
<html lang="en">
<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">

<Title>Web Tool</Title>

<style media="screen">
body {
    background-color: #f9f9f9;
    font: 100% / 162% verdana, arial, helvetica, sans-serif;
 }
#checkbox {
    padding: 0.75em;
    margin: 1.25em 0 0 0.5em;
  }
  
#content {
    display: table;
    width: 100%;
    border-spacing: 0.5em;
 }
 
#map {
    display: table-cell;
 }
 
#side_bar {
    display: table-cell;
    width: 12.5em;
	 height: 50em;
	 border: 0.2em inset #888;
    background-color: #fff;
 }

</style>

</head> 
<body>

<div data-role="page"> 

<div data-role="header"></div>  

<form id="checkbox" action="#">
 <input type="checkbox" name="All" id="all" value="0"><label for="all">All</label>
 <input type="checkbox" name="Name" id="name" value="name"><label for="name">Name</label>      
 <input type="checkbox" name="Name1" id="name1" value="name1"><label for="name1">Name1</label>   
</form>

<div id="content">
 <div id="map"></div>
 <div id="side_bar"></div>
</div>

</div>

<script src="https://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="https://maps.google.com/maps/api/js?sensor=false"></script>
<script>
    var map;
    var markersArray = [];  
    var infoWindow;     
    var places = [ 
       ['1', 40.421613,90.128422,'Name', 'yyyyyyyy', 'zzzz.png'],
    ];
    //alternate btw 7 different colored markers for this..
    var icons = [
        'zzzz.png',
        'ffff.png',       
    ];

    // center map in middle of Nebraska
    var mapCenter = new google.maps.LatLng(40.919036, 90.924594);

    //create the map
    function createMap() {
        map = new google.maps.Map(document.getElementById("map"), {
            center: mapCenter,
            zoom: 5,
            mapTypeId: google.maps.MapTypeId.ROADMAP,
            zoomControl: true,
            streetViewControl: true,
            zoomControlOptions: {
                style: google.maps.ZoomControlStyle.LARGE
            }
        });

        //create a global infowindow to show content
        //set a maxwidth of 300 pixel
        infoWindow = new google.maps.InfoWindow({
            map: map
        });
    }

    function initMarkers() {
        for (var i=0; i<places.length; i++) {
            var place=places[i];

            var marker = new google.maps.Marker({
                position: new google.maps.LatLng(place[1], place[2],place[3]),
                map: map,

                //set icon, category as icons index 
                //outcomment this line if you just want to show the defuult icon
                icon : icons[place[5]],

                //add data from places to the marker
                title : place[0],
                category: place[3],
                content: place[4],
	            icon: place[5]
            });

            //add the marker to the markersArray, used to hide/show markers
            markersArray.push(marker);
            //create a click event that shows the infowindow when a marker is clicked
            //the infowindow get latlng and content from the marker
            google.maps.event.addListener(marker, 'click', function() {
                infoWindow.setPosition(this.position);
                infoWindow.setContent(this.content);
                infoWindow.open(map);
            });
        }
    }
    //show / hide markers based on category
    //if category is 0, show all markers
function showMarkersByCategory(category) {
    for (var i=0; i<markersArray.length; i++) {
        if ((category==0) || (markersArray[i].category==category)) {
            markersArray[i].setVisible(true);
        }
    }
}
function initialize() {
    createMap();
    initMarkers();

    //init the select box where you show/hide the markers per category
    var checkbox=document.getElementById('checkbox');
    checkbox.onclick = function() {
        for (var i=0; i<markersArray.length; i++) {
            markersArray[i].setVisible(false);
        }
        var checkedBoxes = $('#checkbox > input:checkbox:checked');
        for (var i = 0; i < checkedBoxes.length; i++){
            var category = checkedBoxes[i].value;
            showMarkersByCategory(category);
        }
    }
}
    google.maps.event.addDomListener(window, 'load', initialize);

  // == rebuilds the sidebar to match the markers currently displayed ==
  function makeSidebar() {
    var html = "";
    for (var i=0; i<markers.length; i++) {
      if (markers[i].getVisible()) {
        html += '<a href="javascript:myclick(' + i + ')">' + markers[i].html + '<\/a><br>';
      }
    }
    document.getElementById("side_bar").innerHTML = html;
  }
</script>   
</body>
</html>

coothead

hy, thank you, the little error are not my concern right now, i can deal with them once the “big picture” works, namely my little sidebar code is not showing anything ( dosen’t take over the “makers data” ):

function makeSidebar() {
    var html = "";
    for (var i=0; i<markers.length; i++) {
      if (markers[i].getVisible()) {
        html += '<a href="javascript:myclick(' + i + ')">' + markers[i].html + '<\/a><br>';
      }
    }
    document.getElementById("side_bar").innerHTML = html;
  }

Thank you

They are not little errors. For one thing <div>s do not belong in the head section.

3 Likes

Have you had the thought that it might be the small errors that are interfering with the big picture?

2 Likes

Hi there cristimatu,

are you using this…

<script src="https://maps.googleapis.com/maps/api/js?key=yourKEYhere&sensor=false"></script>

…as suggested?

coothead

Thankyou “coothead” for the revised code (with no errors) and nice formats :).
But the logic problem still remains:

html += '<a href="javascript:myclick(' + i + ')">' + markers[i].html + '<\/a><br>';

Should store my markers “data” and:

    document.getElementById("side_bar").innerHTML = html;

should push the data to my side_bar div, but dosen’t.
I have an API Key but for the purpose of solving the problem with my sidebar i used the generic code above. PS: my map / markers / infowindow / filter, works, just the sidebar is the problem.
There is something missing or not taken corectly in the code.
Thank you

Hi there cristimatu,

Google maps are not my forte, but shouldn’t this…

function makeSidebar() {
    var html = "";
    for (var i=0; i<;markers.length; i++) {
      if (markers[i].getVisible()) {
        html += '<a href="javascript:myclick(' + i + ')">' + markers[i].html + '<\/a><br>';
      }
    }

…be…

  function makeSidebar() {
    var html = "";
    for (var i=0; i<markersArray.length; i++) {
      if (markersArray[i].getVisible()) {
        html += '<a href="javascript:myclick(' + i + ')">' + markersArray[i].html + '<\/a><br>';
      }
    }

Also I can see no indication that this function is being called anywhere. :eek:

coothead

Hrm, scratches chin - there might just be some kind of connection here between the two. :slight_smile:

2 Likes

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