Using Google Maps, C#, ASP.net, SQL Server to show Map with Markers. Map not displayed

Question

I know there are quite a few questions related to this, but mine is quite specific. I'm using an example from an online article. Here is my code:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="GoogleMapsAPItesting.WebForm1" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Google Maps Markers</title>
<script type="text/javascript"
src="https://maps.googleapis.com/maps/api/js?key=InsertAPIKeyhere&sensor=false">
</script>

<script type="text/javascript">
function initialize() {



}
</script>
</head>
<body onload="initialize()">
<form id="WebForm1" runat="server">
<div id="mapArea" style="width: 500px; height: 500px;">
</div>


<asp:Literal ID="Literal1" runat="server"></asp:Literal>
</form>
</body>
</html>

And the Code Behind C#

   using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data.SqlClient;

namespace GoogleMapsAPItesting
{
    public partial class WebForm1 : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            string markers = GetMarkers();
            Literal1.Text = @"
<script type=’text/javascript’>
function initialize() {

var mapOptions = {
center: new google.maps.LatLng(28.3213, 77.5435),
zoom: 2,
mapTypeId: google.maps.MapTypeId.ROADMAP
};

var myMap = new google.maps.Map(document.getElementById(‘mapArea’),
mapOptions);" + markers + @"}
</script>";
        }



        protected string GetMarkers()
        {
            string markers = "";
            SqlConnection conn = new SqlConnection();
            conn.ConnectionString =
            "Data Source=FakeServer;" +
            "Initial Catalog=FakeInitCatalog;" +
            "User id=FakeUID;" +
            "Password=FakePass;";
            {
                SqlCommand cmd = new SqlCommand("SELECT Latitude, Longitude, City FROM Locations", conn);
                conn.Open();
                SqlDataReader reader = cmd.ExecuteReader();
                int i = 0;

                while (reader.Read())
                {
                    i++;
                    markers +=
                    @"var marker" + i.ToString() + @" = new google.maps.Marker({
position: new google.maps.LatLng(" + reader["Latitude"].ToString() + ", " +
                    reader["Longitude"].ToString() + ")," +
                    @"map: myMap,
title:’" + reader["City"].ToString() + "’});";
                }
            }
            return markers;
        }
    }
}

When I run this, the map is not displayed, just a blank page. If I take the C# code for literal1, and place it in the HTML/Asp page, the map loads (but the markers are not placed). I feel like I'm just missing one piece. I really appreciate any suggestions.

Thank you.

Please edit your title to describe your problem briefly. You just copy pasted entire tags to the title. — Gokhan Kurt
– Gokhan Kurt, Commented May 4, 2016 at 15:41

Luci · Accepted Answer · 2016-05-04 16:16:51Z

2

Seems that you have used typographic single quote " ’ " instead of programming single quote " ' ".

see

... script type=’text/javascript’ ... document.getElementById(‘mapArea’) ... title:’" + reader["City"].ToString() + "’

The following modified code works

protected void Page_Load(object sender, EventArgs e)
{
    string markers = GetMarkers();
    Literal1.Text = @"
<script type='text/javascript'>
function initialize() {

var mapOptions = {
    center: new google.maps.LatLng(28.3213, 77.5435),
    zoom: 2,
    mapTypeId: google.maps.MapTypeId.ROADMAP
};

var myMap = new google.maps.Map(document.getElementById('mapArea'),
    mapOptions);" + markers + 
@"
}
</script>";

}


protected string GetMarkers()
{
    string markers = "";

    float latitude = 28.3213f;
    float longitude = 77.5435f;

    for (var i = 0; i < 10; i++)
    {
        i++;
        markers +=
        @"var marker" + i.ToString() + @" = new google.maps.Marker({
        position: new google.maps.LatLng(" + (latitude + i).ToString() + ", " +
        (longitude + i).ToString() + ")," +
        @"map: myMap,
        title:'" + "City" + i.ToString() + "'});";
    }

    return markers;
}

edited May 4, 2016 at 16:16

answered May 4, 2016 at 16:09

Luci

1,40610 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

bairdmar Over a year ago

Unbelievable. Good eye. Thanks so much for the help!

Collectives™ on Stack Overflow

Using Google Maps, C#, ASP.net, SQL Server to show Map with Markers. Map not displayed

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related