Solved

ASP.NET Google Map Markers (pushpins) and informatrion display box

Posted on 2016-08-12
6
81 Views
Last Modified: 2016-08-21
I have a small project where I google map several records from my SQL database. The table has just a Latitude, Longitude and a unique record number fields. I managed to display my records on the map and show the record ID in the pushpin (label) as well in the information box when you click with the mouse over a pin (See screenshot). The problem is that the pushpin display only the first digit (I guess because of the pin size and/or the font size used by the system) of the record ID and I have about 150 records in my table. The "information box" does show the full number (See screenshot) however, if accessing the page with an iOS device, I have no idea how to brig the information box up - if there is a way. It is important for iPhone to be able to see the full Record ID in one way or another. Please be specific in you solution since I have a very limited experience in ASP.NET VB.NET. Thank you all

This is what I have in my aspx:

<%@ Page Title="" Language="vb" AutoEventWireup="false" MasterPageFile="~/Site.Mobile.Master" CodeBehind="MyMap.aspx.vb" Inherits="WebApplication1.MyMap" %>

<asp:Content ID="Content3" ContentPlaceHolderID="MainContent" runat="server">

    <!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml" > 
     <script type="text/javascript"
     src="https://maps.googleapis.com/maps/api/js?key=My_Code_Here&amp;sensor=false">
     </script>

<body onload="initialize()">
          <div id="mapArea" style="width: 500px; height: 500px;">
          </div>
 
          <asp:Literal ID="Literal1" runat="server"></asp:Literal>
</body>
</html>

</asp:Content>

Open in new window


And this is my VB code for the same page:

Imports System.Data
Imports System.Configuration
Imports System.Data.SqlClient

Public Class MapAvailableTerritories
    Inherits System.Web.UI.Page

    Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load


        Dim markers As String = ""
        markers = GetMarkers()
        Literal1.Text = "<script type='text/javascript'>" +
     "function initialize() {" +
     "var mapOptions = {" +
     "center: new google.maps.LatLng(35.372278, -80.633568)," +
     "zoom: 9," +
     "mapTypeId : google.maps.MapTypeId.ROADMAP" +
     "};" +
     "var myMap = new google.maps.Map(document.getElementById('mapArea'), mapOptions);" +
     markers +
     "}" +
     "</script>"


    End Sub

    Protected Function GetMarkers() As String
        Dim markers As String = ""

        Using con As New SqlConnection(ConfigurationManager.ConnectionStrings("DefaultConnection").ConnectionString)
            Dim cmd As SqlCommand = New SqlCommand("SELECT Lat, Lng, Territory FROM MyMapData", con)
            con.Open()
            Dim reader As SqlDataReader = cmd.ExecuteReader()
            Dim i As Integer = 0
            While reader.Read()
                i = i + 1
                markers = markers + "var marker" + i.ToString() + "= new google.maps.Marker({" +
               "position: new google.maps.LatLng( " + reader("Lat").ToString() + ", " +
               reader("Lng").ToString() + ")," +
               "Label:'" + reader("RecordID").ToString() + "', " +
               "map: myMap," +
               "title:'" + reader("RecordID").ToString() + "'});"


            End While
            con.Close()
        End Using
        Return markers
    End Function

End Class

Open in new window


This is the result I currently experienced (The number in the pin is also 38 as shown by the information box:
 MyMap
0
Comment
Question by:Cobra967
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 3
  • 3
6 Comments
 
LVL 32

Assisted Solution

by:Robberbaron (robr)
Robberbaron (robr) earned 500 total points
ID: 41755410
I do something very similar but all the work is in Javascript in the aspx page.

but rather than use the Label attribute, I use the Html attribute.  It can then show much more data. ( i show a list of items that apply to the pin.)

           var contentTags = '<h2><a href=\'details_projects.aspx?ProjectNo=' + Title + '\' class=\'link1\'>' + Title + '</a></h2>' + Descr;

           //surround the real text with div to style it
            var contentString = '<div id=\'content\' style=\'width:280px;\'>' + contentTags + '</div>';

            //save content into the html property

            var marker = new google.maps.Marker({
                position: latlng
                , html: contentTags
                , icon: img
            });

            google.maps.event.addListener(marker, 'click', function () {
                infowindow.close();
                infowindow.setContent(contentString);
                infowindow.open(map, marker);
            });

Open in new window


it may also be easier to create a Jscript function to do this, then call the function each time you want to add a pin.
eg i use          function createMarker(latlng, Title, Descr)

the click listener should work with all webbrowsers. (dont have a i-device so cant confirm)
1
 

Author Comment

by:Cobra967
ID: 41755805
Thank you Robberbaron! Because I am new to ASP.NET I am afraid you lost me :-) All I want is to be able to see up to 3-digits in the Pushpin (if possible - by enlarging the pushpin or reducing the font), this will assure compatibility with Windows and iOS systems which has no mouse clicking ability. Will integrating your idea work? If so, would you be so kind to help me out with the coding?

Thank you!
0
 
LVL 32

Expert Comment

by:Robberbaron (robr)
ID: 41756199
1. i dont think enlarging the pin is possible.  I dont even know how your pins work as I had to use Icons; each icon comes as an image of that number.
2. all the browsers support 'click' but perhaps you have to add the listener.... I copied code from examples on google web site.  That is where I set the width of the text that pops up.
0
Salesforce Has Never Been Easier

Improve and reinforce salesforce training & adoption using WalkMe's digital adoption platform. Start saving on costly employee training by creating fast intuitive Walk-Thrus for Salesforce. Claim your Free Account Now

 

Accepted Solution

by:
Cobra967 earned 0 total points
ID: 41758746
0
 
LVL 32

Expert Comment

by:Robberbaron (robr)
ID: 41759180
the use of the repeater to create the markers list is something I will remember for future as well
0
 

Author Closing Comment

by:Cobra967
ID: 41764178
I found a better solution elsewhere.
0

Featured Post

Instantly Create Instructional Tutorials

Contextual Guidance at the moment of need helps your employees adopt to new software or processes instantly. Boost knowledge retention and employee engagement step-by-step with one easy solution.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article discusses the ASP.NET AJAX ModalPopupExtender control. In this article we will show how to use the ModalPopupExtender control, how to display/show/call the ASP.NET AJAX ModalPopupExtender control from javascript, how to show/display/cal…
One of the pain points with developing AJAX, JavaScript, JQuery, and other client-side behaviors is that JavaScript doesn’t allow for cross domain request for pulling content. For example, JavaScript code on www.johnchapman.name could not pull conte…
If you’ve ever visited a web page and noticed a cool font that you really liked the look of, but couldn’t figure out which font it was so that you could use it for your own work, then this video is for you! In this Micro Tutorial, you'll learn yo…
Do you want to know how to make a graph with Microsoft Access? First, create a query with the data for the chart. Then make a blank form and add a chart control. This video also shows how to change what data is displayed on the graph as well as form…

627 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question