reading textfile into google maps using javascript and jquery

The code that follows is the code in my .aspx page. The map displays but the markers do not. The file is not being read and therefore the marker coordinates dont get retrieved for the marker locations. I tried debugging but the debugger never hits on the debugger line.

<%@ Page Title="" Language="C#" MasterPageFile="~/MasterPage.master" AutoEventWireup="true" CodeFile="MarkerOptions.aspx.cs" Inherits="MarkerOptions" %>

<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
    <script src="/Scripts/jquery-1.5.1.min.js" type="text/javascript"></script>
    <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=AIzaSyCjtIboyk_zcd4SoE9fzNoGNzt_tIqG8jY&sensor=false"></script>
<script type ="text/javascript">
    var map;
    function initialize() {
        var latlng = new google.maps.LatLng(-34.397, 150.644);
        var myOptions = {
            zoom: 5,
            center: latlng,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        map = new google.maps.Map(document.getElementById("map"), myOptions);
       var marker, i;
        debugger;
        var file = "X:\ASP.Net\GoogleMaps\GMAP\MarkerCoordinates.txt"; //file:\\X:\ASP.Net\GoogleMaps\GMAP\MarkerCoordinates.txt
            $.get(file,function(txt){
            var lines = txt.responseText.split("\n");
              for (i = 0; i < lines.length; i++) {
                marker = new google.maps.Marker({
                position: new google.maps.LatLng(lines.split(",")[0], lines.split(",")[1]),
                map: map
              });
//        var infowindow = new google.maps.InfoWindow({
//            content: 'Location info:<br/>Country Name:<br/>LatLng:'
//        });
//        google.maps.event.addListener(marker, 'click', function () {
//            // Calling the open method of the infoWindow
//            infowindow.open(map, marker);
//        });
    }
        window.onload = initialize;
</script>

<h2>MarkerOptions Demo:</h2>
<div id ="map" style="height: 750px; width: 900px; top: 60px; left: 126px; position: absolute;"></div>
</asp:Content>

Re: reading textfile into google maps using javascript and jquery

Hi,

I suggest you debugging with IE Developer Tools. Any more question, please feel free to reply.

Re: reading textfile into google maps using javascript and jquery

I guess you didn't see the debugger; code line

it seems rather strange that no one seems to be familiar with how to read a text file which resides in your solution folder (Vs2010) into a javascript variable either using jquery or javascript.

Re: reading textfile into google maps using javascript and jquery

That is because it typically isn't done. The browser won't trust you, and it rightly shouldn't. No page should allow you to read random files off your local system, that's a major security issue. You would be better off having the server read the file for you, then parsing it into a collection, and using the Javascript Serializer to generate a JSON string to include in the page.

Re: reading textfile into google maps using javascript and jquery

Bear with me as I'm not an web developer but a vb.net developer. So I would retrieve the text file contents via code in the code behind? How would I pass that string to the javascript? I need the contents of that file to generate the google map markers. I am currently reading local text files through an asp.net literal control for other content on my webpages, is that not proper form? I am doing so as it's far easier to update content in a text file than to find every occurence of it in a website and just have that file read in where necessary.

Re: reading textfile into google maps using javascript and jquery

Collect the contents into a collection of some sort, then you should be able to do something like (sorry, this is C#, but VB.net will be similiar):

using System.Web.Script.Serialization;

var oSerializer = new JavaScriptSerializer();

sJSON = oSerializer.Serialize(myCollection);
Page.ClientScript.RegisterStartupScript(GetType(), "mapdata", "mapdata=" + sJSON + ";", true);

I often this with LINQ and pass that to the serializer, but a collection should work just as well. If not pass myCollection.AsEnumerable(), but I think you can pass it directly. After that, you should have an array of objects that you can iterate through in your webpage. Sort of like:

for (var i = 0; i < window.mapdata.length; i++) {
 var obj = window.mapdata[i];

 var lat = obj["latitude"];
 var lng = obj["longitude"];
... Set up Google map stuff here with lat/lng
}

Re: reading textfile into google maps using javascript and jquery

As for reading in a text file and passing it in an ASP literal, it sounds like what you really want is a UserControl. You can put whatever you want in it and then reference that anywhere in your web pages, and it will basically copy in the HTML where you placed the UserControl. Of course I usually have something more than just text, but sometimes not. Sort of like

Contents of default.aspx:

<%@ Register src="Map.ascx" tagPrefix="something" tagName="map" %>

....

<something:map ID="map1" runat="server"/>
....

Contents of Map.ascx:

<input type="text" style="font-weight: bold;" ID="formtext1" />

Then if you change Map.ascx for whatever reason, you get it everywhere you have that UserControl.

Re: reading textfile into google maps using javascript and jquery

Thank you, I came up with a similar soultion after your last post