title: displaying markers on a google map in javascript
body: <p>I am a Javascript beginner and I am trying to create markers on a google map. So first of all I am getting GPS co-ordinates from a database which I am splitting apart to get the lattitude and longlitude values, then I am adding them to 2 separate listboxes called lstBoxLatGPS and lstBoxLongGPS in c#</p>
  
  <pre><code>foreach (string item in GPSLatList)
      {
          lstBoxLatGPS.Items.Add(item);
      }
  foreach (string item in GPSLongList)
      {
          lstBoxLongGPS.Items.Add(item);
      }
  </code></pre>
  
  <p>Now in Javascript I want to take the items in the listboxes and create markers on the map I have 2 functions:</p>
  
  <pre><code>        function GetLatValues() 
          {
              var arrValues= new Array();
              var listBox = document.getElementById("&lt;%=lstBoxLatGPS.ClientID%&gt;");
              for (var i = 0; i &lt; listBox.options.length; i++) 
              {arrValues[i]= listbox.options[i].text }
              return (arrValues);
          }
          function GetLongValues() 
          {
              var arrValues= new Array();
              var listBox = document.getElementById("%=lstBoxLongGPS.ClientID%&gt;");
              for (var i = 0; i &lt; listBox.options.length; i++) 
              {arrValues[i]= listbox.options[i].text }
              return (arrValues);
          }
  </code></pre>
  
  <p>then to add the arrays to made the markers:</p>
  
  <pre><code>        function initialize()
          {
              var mapCanvas = document.getElementById('map-canvas');
              var mapOptions =
              {
                  center: new google.maps.LatLng(-28.4792811, 24.6722268),
                  zoom: 6,
                  mapTypeId: google.maps.MapTypeId.ROADMAP
              }
              var map = new google.maps.Map(mapCanvas, mapOptions);
              map.set('styles', [
    {
        "featureType": "landscape",
        "stylers": [
          { "color": "#c9d7bb" }
        ]
    }, {
        "featureType": "administrative.province",
        "elementType": "labels.text",
        "stylers": [
          { "visibility": "on" },
          { "color": "#ffc23d" }
        ]
    }, {
        "featureType": "poi.attraction",
        "stylers": [
          { "visibility": "on" },
          { "color": "#9be586" }
        ]
    }, {
        "featureType": "administrative.province",
        "elementType": "geometry",
        "stylers": [
          { "visibility": "on" },
          { "color": "#000000" },
          { "weight": 3.2 }
        ]
    }
              ]);
  
              var GPSLatArray = new Array();
              var GPSLongArray = new Array();
              GPSLatArray = GetLatValues();
              GPSLongArray = GetLongValues();
  
              for (var i = 0; i &lt; GPSLatArray.length; i++)
              {
                  var marker = new google.maps.Marker({position: GPSLatArray[i],GPSLongArray[i] });
                  marker.setMap(map);
              }
          }
          google.maps.event.addDomListener(window, 'load', initialize);
  </code></pre>
  
  <p>When the map is supposed to be displayed, it is just blank, not showing the map at all.</p>