Please solve my problem. I am tired to pass SQL Server database value in Google Map marker Array in JavaScript Mvc. I am Run the code generate error "marker.length". In this code i will be showing Google Map Marker Cluster. I hope any one can help me. Thanks in Advance..
 
View
  1. @{    
  2.     ViewBag.Title = "Home Page";    
  3. }  
  4.     class="divdisplay">    
  5.         "text/javascript" src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer/src/markerclusterer.js">    
  6.         "https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/markerclusterer.js">    
  7.             
  8.     
  9.         "text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false">  
  10.         "text/javascript">  
  11.             window.onload = function () {    
  12.                 var mapOptions = {    
  13.                     center: new google.maps.LatLng(25.359454, 68.357989),    
  14.                     zoom: 13,    
  15.                     mapTypeId: google.maps.MapTypeId.ROADMAP    
  16.                 };  
  17.                 var markers;    
  18.                 $(document).ready(function () {    
  19.                     $("#txt_button").on('click', function () {    
  20.     
  21.                         $.get("/Home/dates", { dt: '04-26-2018', city: 'sadgemoor' }, function (data) {    
  22.                             map = new google.maps.Map(document.getElementById("dvMap"), mapOptions);    
  23.                             $.each(data, function (i, v1) {    
  24.                                 markers = [{ "title": 'No Title', "lat": v1.b_latlng1, "lng": v1.b_latlng2, "description": 'No Description' }]    
  25.                             });    
  26.                         });  
  27.                     });  
  28.                 });  
  29.                 // declare an array to keep all google.maps.Marker instances in:    
  30.                 var googleMarkers = [];  
  31.                 var infoWindow = new google.maps.InfoWindow();    
  32.                 var map = new google.maps.Map(document.getElementById("dvMap"), mapOptions);    
  33.                 for (i = 0; i < markers.length; i++) {    
  34.                     var data = markers[i]    
  35.                     var myLatlng = new google.maps.LatLng(data.lat, data.lng);    
  36.                     var marker = new google.maps.Marker({    
  37.                         position: myLatlng,    
  38.                         map: map,    
  39.                         title: data.title    
  40.                     });  
  41.                     // add the new marker to the googleMarkers array    
  42.                     googleMarkers.push(marker);   
  43.                     (function (marker, data) {    
  44.                         google.maps.event.addListener(marker, "click", function (e) {    
  45.                             infoWindow.setContent(data.description);    
  46.                             infoWindow.open(map, marker);    
  47.                         });    
  48.                     })(marker, data);    
  49.                 }  
  50.                 // now all the markers have been created, make a new MarkerClusterer:    
  51.                 var mcOptions = { gridSize: 50, maxZoom: 15, imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m' };    
  52.                 var markerCluster = new MarkerClusterer(map, googleMarkers, mcOptions);  
  53.             }    
  54.             
  55.         "txt_button">Marker    
  56.         "dvMap" style="width: 900px; height: 500px">    
  57.         
   
  •     
    •