Please help! Javascript


#1

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>

#3

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...


#4

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 ( @gandalf458 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


#5

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


#6

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


#7

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


#8

Hi there cristimatu,

are you using this...

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

...as suggested?

coothead


#9

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


#10

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


#11

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