CODEWITHSUNDEEP
javascripthtmlgoogle-mapsgoogle-maps-api-3
JamieB
JamieB

Reputation: 247

Text Labels to Google Map Markers

Currently working on a map tracking GPS coords around the UK, however I'm finding it hard to how each point uniquely, I would normally do this by adding a form of label but it seems Google Map API V3 only allows a max of 1 char, is there anything else I can try? I've tried the various scripts but nothing seems to work with my current setup.

So any chance of some pointers? Just want a simple label of the section is pulled from the SQL, eg the title.

The page is designed in ASP.NET (Visual Studio 2015) using VB.

Code below:

    <%@ Page Language="VB" AutoEventWireup="false" CodeFile="VB.aspx.vb" Inherits="VB" %>
<META HTTP-EQUIV="Refresh" CONTENT="60;" />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">




<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title></title>

    <style type="text/css">
.boldStyle
{
  font-size: 10pt;
  font-weight: bold;
}


.normalStyle
{
  font-size: 10pt;
}
</style>
</head>
<body>


<form id="form1" runat="server">
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
var markers = [
<asp:Repeater ID="rptMarkers" runat="server">
<ItemTemplate>
         {
            "title": '<%# Eval("Loco") %>',
            "lat": '<%# Eval("TLatitude") %>',
            "lng": '<%# Eval("TLongitude") %>',
            "description": '<%# "<b>" & "Last Update Time: " & "</b>" & Mid(Eval("LLocation"), 12, 8) & "<br>" & "<b>" & "Current Location: " & "</b>" & Eval("TLocation") & "<br>" & "<b>" & "Loco: " & "</b>" & Eval("Loco") & "<br>" & "<b>" & "Headcode: " & "</b>" & Eval("Position") & "<br>" & "<b>" & " Origin: " & "</b>" & Eval("Origin") & "<br>" & "<b>" & "Destination: " & "</b>" & Eval("destination") & "<b>" & "<br>" & "Status: " & "</b>" & Eval("report_delay")%>'

         }
</ItemTemplate>
<SeparatorTemplate>
    ,
</SeparatorTemplate>
</asp:Repeater>
];
</script>
<script type="text/javascript">

    window.onload = function () {
        var mapOptions = {
            center: {lat:53.46, lng: -1.46},
            zoom: 7,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        var infoWindow = new google.maps.InfoWindow();
        var map = new google.maps.Map(document.getElementById("dvMap"), mapOptions);
        for (i = 0; i < markers.length; i++) {
            var data = markers[i]
            var myLatlng = new google.maps.LatLng(data.lat, data.lng);
            var marker = new google.maps.Marker({
                position: myLatlng,
                map: map,
                label: data.title

            });
            (function (marker, data) {
                google.maps.event.addListener(marker, "click", function (e) {
                    infoWindow.setContent(data.description);
                    infoWindow.open(map, marker);
                });
            })(marker, data);
        }
    }

</script>
<div id="dvMap" style="width: 1600px; height: 900px">
</div>
    <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:ConString %>" SelectCommand="SELECT * FROM [******]"></asp:SqlDataSource>
</form>

Upvotes: 0

Views: 14361

Answers (2)

YI YANG
YI YANG

Reputation: 133

Screenshot of my project

Google RichMarker can let you create markers by writing HTML and CSS. There is a simple tutorial for how to use this. Above picture is a screenshot of what I did today.

Below is the code of how I did it.

JS code for creating marker 

    var marker = new RichMarker({
        map: map,
        shadow: 'none',
        position: new google.maps.LatLng(data.lat, data.lng),
        content: '<div><div class="label_content">' + data.title // the data title you want to display
        + '</div></div>'  
    });

CSS for marker

      .label_content{
      position:relative;
      border-radius: 5px;
      padding:5px;
      color:#ffffff;
      background-color: red;
      font-size: 20px;
      width: 100%;
      line-height: 20px;
      text-align: center;
      }

      .label_content:after {
      content:'';
      position: absolute;
      top: 100%;
      left: 50%;
      margin-left: -10px;
      width: 0;
      height: 0;
      border-top: solid 10px red;
      border-left: solid 10px transparent;
      border-right: solid 10px transparent;
      }

Upvotes: 1

ScaisEdge
ScaisEdge

Reputation: 133360

I have tried in various way and the best solution found is based over some Libraries like http://googlemaps.github.io/libraries.html and for the label management you can use https://github.com/googlemaps/js-map-label

If you need o lot of labe l (>500) the performance are bit slow because the label is added like a SVG

once added the library the creation of a label is similar to this 

            aMapLabel = new MapLabel({
                text: jsonData[i].ZonaPrg,
                position: new google.maps.LatLng(jsonData[i].CentroLat, jsonData[i].CentroLng),
                strokeColor: '#000000',
                map: map,
                fontSize: 15,
                minZoom: 16,
                strokeWeight: 10,   
                //fillWeight: 5,                    
                //zIndex: 5200,
                align: 'center'
            });

Upvotes: 1

Related Questions