Is it possible to use the controller to return javascripts at page load that creates a list of custom markers?

I tried to change the imagepath, latitude and longitude with razor and my map doesn't even show up anymore

This is the working hardcoded javascript I am using

var gym = {
    anchor: new google.maps.Point(16, 32),
    origin: new google.maps.Point(0, 0),
    scaledSize: new google.maps.Size(32, 32),
    size: new google.maps.Size(64, 64),
    url: "---/gym.png"
};

var warehouse = {
    anchor: new google.maps.Point(16, 32),
    origin: new google.maps.Point(0, 0),
    scaledSize: new google.maps.Size(32, 32),
    size: new google.maps.Size(64, 64),
    url: "---/warehouse.png"
};

var icons = {
    gym: {
        icon: gym
    },
    warehouse: {
        icon: warehouse
    }
};

var features = [
  {
      position: new google.maps.LatLng(-33.91721, 151.22630),
      type: 'gym'
  }, {
      position: new google.maps.LatLng(-33.91539, 151.22820),
      type: 'warehouse'
  },
];

This is the model I created

public class MapModel
{
    public double lat { get; set; }
    public double lng { get; set; }
    public string objectType { get; set; }
    public int objectID { get; set; }
    public string imagepath { get; set; }

    public List<MapModel> mapModelList { get; set; }
}

And my controller

public ActionResult Index()
{
    Models.MapModel mapModel = new Models.MapModel();
    mapModel.lat = -33.91721;
    mapModel.lng = 151.22630;
    mapModel.imagepath = "/Image/gym.png";

    return View(mapModel);
}

So I started by trying to change 1 of the markers by changing this part of the javascript,

//Forloop should create list of icons from controller
var gym = {
    anchor: new google.maps.Point(16, 32),
    origin: new google.maps.Point(0, 0),
    scaledSize: new google.maps.Size(32, 32),
    size: new google.maps.Size(64, 64),
    url:  "serverpath" + @(Model.imagepath)
};

//Forloop should create list of features from controller
var features = [
  {
      position: new google.maps.LatLng(@(Model.lat), @(Model.lng)),
      type: 'gym' //Be something like @(Model.objectType)
  }, {
      position: new google.maps.LatLng(-33.91539, 151.22820),
      type: 'warehouse'
  },
];

Related posts

Recent Viewed