Converting JSON Data to Map Markers on Google Maps

Currently, I am attempting to pass a Json String into my Javascript code in order to create a list of markers on a Google Map.

The map code functions properly as I have successfully tested it with a hard coded Json Object. However, now I need to fetch the data from my Model using the following code:

<script>
var markers = "@Model.JsonLifeboatLocations";
...
</script>

Despite not receiving any script errors, the above code does not display any markers.

Any suggestions on where I might be making a mistake?

View Model Getter:

    public string JsonLifeboatLocations 
    {
        get 
        {
            return new JavaScriptSerializer().Serialize(LifeboatLocations);   
        }
    }

Reference: The JavaScript code needed for displaying the markers

for (i = 0; i < markers.length; i++) {
    var data = markers[i];
    new google.maps.LatLng(data.Lat, data.Lon);
    var marker = new google.maps.Marker({
        position: myLatlng,
        map: map,
        title: data.Name
    });
}

Answer №1

Give this a shot:

<script>
var markers = @Html.Raw(Model.JsonLifeboatLocations);
...
</script>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The data in ag Grid does not display until all grid events have been completed

After setting the rowData in the onGridReady function, I noticed that the data does not display until all events are completed. I also attempted using the firstCellrendered event, but unfortunately, it did not resolve the issue. OnGridReady(){ this.r ...

`user implemented object comparison within a set in unity (es6)`

I am facing an issue where I need to handle multiple values and ensure that only unique ones are used. With the use of node js and access to harmony collections through the --harmony flag, I have considered using a Set as a potential solution. What I am s ...

Mongoose: execute population step after making the query

What is the proper way to populate the query result in Mongoose after executing a query similar to this: users .find({name:"doejohn"}) .skip(3) .limit(9) .exec((err,user) => { user // result ...

The Value of Kendo Data

Below is my current kendo code snippet: <script> $("#dropdowntest").kendoDropDownList({ optionLabel: "Select N#", dataTextField: "NNumber", dataValueField: "AircraftID", index: 0, ...

Tips for utilizing JavaScript functions within Vue directives?

Let's say I have a JS function that looks like this: function myFunc() { return true; } Now, I want to display an element if the output of the function is true: <p v-if="myFun()">I am Test</p> I understand that I can place the myFun ...

Having trouble accessing the URL route by typing it in directly within react-router?

Having some trouble getting dynamic routes to work with react router. Whenever I enter a URL like localhost:3000/5, I receive the error message "cannot GET /5". Here is how my router is configured: class App extends Component { render() { retu ...

I am perplexed by the driver's inability to locate the element

Check out this webpage for the latest updates: I am attempting to extract data on EPS, EPS beat, GEPS, GEPS beat, and revenue from this site. List1 = driver.find_element_by_xpath("""/html/body/div[2]/div[1]/div/main/div[2]/div[3]/div[2]/sec ...

What is the best way to set the value of the days in a month to a div

I've been experimenting with creating a calendar using javascript, HTML, and CSS on my own. I managed to achieve some functionality like obtaining the current month and year as well as the previous month and year by clicking a button in HTML. However, ...

The variable 'firebase' is nowhere to be found

I am encountering an issue with the error message 'Can't find variable: firebase' and I am struggling to identify the cause of this error. I have installed firebase using 'yarn add firebase' and double-checked that it is properly i ...

Comparing CakePHP's JSON and AJAX capabilities

Apologies if the title of this question is misleading. I am new to utilizing JSON and AJAX for data formatting and server updates without refreshing. As a beginner in this area, I seek clarification on the best approach. In my CakePHP web application: Is ...

Access an external URL from JSON data simply by utilizing VueJS

I am currently facing a challenge with linking to external URLs. The URL is extracted from JSON and connected to an HTML tag, but I am unable to retrieve the data and link it to the URL when clicking on images. HTML <section class="bg-light page-secti ...

Submitting forms that contain files using jQuery and AJAX

Despite searching through numerous questions on this topic, I have yet to find a solution to my specific issue. My objective is to successfully submit an entire form, potentially containing files as well. The code I currently have is not working: $(target ...

AngularJS directive that performs asynchronous validation upon blur

I'm working on developing a directive that validates email addresses provided by users through asynchronous web requests. While the functionality is sound, I've encountered an issue where asynchronous calls are triggered every time a user types a ...

Having trouble passing data from router to View with EJS in Express. Despite trying, still encountering ReferenceError message

I encountered an issue when trying to display form errors to the user. I attempted to pass the errors from the router to my view file. Error Message ReferenceError: e:\2016\passport\views\register.ejs:38 36| 37| <div ...

Hover over the text to disable the input element and display it as a textbox

Currently, I have a situation where I have two text boxes - when text is entered into textbox1, textbox2 becomes disabled as expected. However, my second requirement is that upon disabling textbox2, hovering over it should display the message "You can ente ...

Fetch a JSON list containing missing objects and substitute them with null values using Angular 2

Here's my JSON array : "user" : { "id": 456, "nickname": "xxx", "pf": { "id": 123, "account": [ { "accountid": 1494235749, "status": "New", "accountnbr": 12345, ...

Disabling a button after clicking using jQuery

There are occasions when I can inadvertently trigger the submit button twice, resulting in the ajax being triggered twice as well. Below is my HTML code: <div class="buttons-area"> <input id="step-two" class="btn btn-primary" type="submit" v ...

Hover to stop menu movement

Can someone help me achieve a similar menu hover effect like this one? I'm trying to create a menu with a hold/pause effect on hover, specifically in the section titled "A programme for every vision". The goal is to navigate through the sub menus smo ...

The process of initializing the Angular "Hello World" app

Beginning with a simple "hello world" Angular app was going smoothly until I attempted to add the controller. Unfortunately, at that point, the expression stopped working on the page. <!doctype html> <html ng-app='app'> <head> ...

Searching for a specific field within an array in a nested subdocument in MongoDB: What you need to know

I am having trouble retrieving lookup data for an embedded array within a document. Below is a snippet of the data: { "_id": "58a4fa0e24180825b05e14e9", "fullname": "Test User", "username": "testuser" "teamInfo": { "chal ...