Ошибка массива маркеров Google map в MVC и javascript
Смотреть
@{ ViewBag.Title = "Home Page"; } <div class="divdisplay"> <script type="text/javascript" src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer/src/markerclusterer.js"></script> <script src="https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/markerclusterer.js"> </script> <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script> <script type="text/javascript"> window.onload = function () { var mapOptions = { center: new google.maps.LatLng(25.359454, 68.357989), zoom: 13, mapTypeId: google.maps.MapTypeId.ROADMAP }; var markers; $(document).ready(function () { $("#txt_button").on('click', function () { $.get("/Home/dates", { dt: '04-26-2018', city: 'sadgemoor' }, function (data) { map = new google.maps.Map(document.getElementById("dvMap"), mapOptions); $.each(data, function (i, v1) { markers = [{ "title": 'No Title', "lat": v1.b_latlng1, "lng": v1.b_latlng2, "description": 'No Description' }] }); }); }); }); // declare an array to keep all google.maps.Marker instances in: var googleMarkers = []; var infoWindow = new google.maps.InfoWindow(); var map = new google.maps.Map(document.getElementById("dvMap"), mapOptions); for (i = 0; i < markers.length; i++) { var data = markers[i] var myLatlng = new google.maps.LatLng(data.lat, data.lng); var marker = new google.maps.Marker({ position: myLatlng, map: map, title: data.title }); // add the new marker to the googleMarkers array googleMarkers.push(marker); (function (marker, data) { google.maps.event.addListener(marker, "click", function (e) { infoWindow.setContent(data.description); infoWindow.open(map, marker); }); })(marker, data); } // now all the markers have been created, make a new MarkerClusterer: var mcOptions = { gridSize: 50, maxZoom: 15, imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m' }; var markerCluster = new MarkerClusterer(map, googleMarkers, mcOptions); } </script> <button id="txt_button">Marker</button> <div id="dvMap" style="width: 900px; height: 500px"> </div> </div>
Класс Crud
public class Crud_class { public string b_latlng1 { get; set; } public string b_latlng2 { get; set; } }
Класс БД
using System; using System.Collections.Generic; using System.Configuration; using System.Data; using System.Data.SqlClient; using System.Linq; using System.Web; namespace sql_cluster.Models { public class db { public List<Crud_class> GetAllRoutes(DateTime dt,string city) { string strConnection = ConfigurationManager.ConnectionStrings["DBCS"].ConnectionString; List<Crud_class> lstRoutes = new List<Crud_class>(); using (SqlConnection con = new SqlConnection(strConnection)) { string sql = "select b_latlng from map_table where t_date='" + dt + "' and city='" + city + "'"; SqlCommand cmd = new SqlCommand(sql, con); con.Open(); SqlDataReader reader = cmd.ExecuteReader(); Crud_class route = null; while (reader.Read()) { route = new Crud_class(); //route.id = Convert.ToInt32(reader["id"]); route.b_latlng1 = (reader["b_latlng"].ToString().Split(',')[0]); route.b_latlng2 = (reader["b_latlng"].ToString().Split(',')[1]); //route.LatLngTo = reader["b_latlng"].ToString(); lstRoutes.Add(route); } } return lstRoutes; } } }
Домашний Контроллер
using sql_cluster.Models; using System; using System.Collections.Generic; using System.Data; using System.Linq; using System.Web; using System.Web.Mvc; namespace sql_cluster.Controllers { public class HomeController : Controller { public ActionResult Index() { return View(); } public JsonResult dates(DateTime dt,string city) { List<Crud_class> lst = new db().GetAllRoutes(dt,city); return Json(lst, JsonRequestBehavior.AllowGet); } } }
Что я уже пробовал:
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..