отображение маркеров на карте google в javascript

Question

Я начинаю Javascript, и я пытаюсь создать маркеры на карте google. Поэтому в первую очередь я получаю GPS координаты из базы данных, которую я расщеплении, чтобы получить Lattitude и longlitude значения, то я добавляю их в 2 отдельных ListBoxes называемых lstBoxLatGPS и lstBoxLongGPS в C#

foreach (string item in GPSLatList) 
    { 
     lstBoxLatGPS.Items.Add(item); 
    } 
foreach (string item in GPSLongList) 
    { 
     lstBoxLongGPS.Items.Add(item); 
    } 

сейчас в Javascript Я хочу взять элементы в ListBoxes и создавать маркеры на карте у меня есть 2 функции:

 function GetLatValues() 
     { 
      var arrValues= new Array(); 
      var listBox = document.getElementById("<%=lstBoxLatGPS.ClientID%>"); 
      for (var i = 0; i < listBox.options.length; i++) 
      {arrValues[i]= listbox.options[i].text } 
      return (arrValues); 
     } 
     function GetLongValues() 
     { 
      var arrValues= new Array(); 
      var listBox = document.getElementById("%=lstBoxLongGPS.ClientID%>"); 
      for (var i = 0; i < listBox.options.length; i++) 
      {arrValues[i]= listbox.options[i].text } 
      return (arrValues); 
     } 

затем добавить массивы из маркеров:

 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 < GPSLatArray.length; i++) 
      { 
       var marker = new google.maps.Marker({position: GPSLatArray[i],GPSLongArray[i] }); 
       marker.setMap(map); 
      } 
     } 
     google.maps.event.addDomListener(window, 'load', initialize); 

Когда карта должна отображаться, она просто пустая, не отображающая карту вообще.

Answer 1

Я использовал пакет Artem.Google, чтобы создать карту, и теперь она работает.

Answer 2

Чтобы отобразить карту, вам нужно добавить div на страницу aspx.

<div class="img-thumbnail" id="map-canvas" style="width: 369px; height: 289px;"></div>