Add text to Circles in Google Maps API not working

I am trying to add text to circles using GoogleAPI. I did the following :-

       <!DOCTYPE html>
        <html>
        <head>
        <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
        <meta charset="utf-8">
        <title>PoliceMonitor</title>
        <style>
        html, body, #map-canvas {
            height: 100%;
            margin: 0px;
            padding: 0px
        }
        </style>

    <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
    <script>
    function csvToJS(csv) {
        var resp=[];
        var rows = csv.split('\n');
         for(var i=0;i<rows.length;i++){
             var row=rows[i].split(',');
             row[0]=row[0].trim();
            resp[i]=row;
    console.log(resp);
         }
         return resp;
     }
    var citymap;
    var req = new XMLHttpRequest();
    var file = "http://localhost:8080/rahul/data.csv";
    req.open('GET', file, true);
    req.send();
    req.onreadystatechange = function() {
        if (req.status == 200) {
           var csv = req.responseText;
          var data = csvToJS(csv);

           citymap = data;

        }
        initialize();

    };

        var cityCircle;

        function initialize() {
            // Create the map.
            var mapOptions = {
                zoom : 5,
                center : new google.maps.LatLng(37.09024, -95.712891),
                mapTypeId : google.maps.MapTypeId.ROADMAP
            };

            var map = new google.maps.Map(document.getElementById('map-canvas'),
                    mapOptions);


            var loop = 0;
            for (i = 0; i < citymap.length; i++) {
                var populationOptions = {
                    strokeColor : '#000000',
                    strokeOpacity : 0.8,
                    strokeWeight : 2,
                    fillOpacity : 0.35,
                    map : map,
                    center : new google.maps.LatLng(citymap[i][1], citymap[i][2]),
                    //radius : Math.sqrt(citymap[i][3]) * 20000 
                    radius : citymap[i][3] * 9000 
                };

                cityCircle = new google.maps.Circle(populationOptions);
                loop = loop + 1;

            }
       var labelText = '<div style="color: #FFF">Text goes here</div>';

    var myOptions = {
        content: labelText,
        boxStyle: {
            background: '#000',
            border: "1px solid black",
            textAlign: "center",
            fontSize: "8pt",
            width: "90px"
        },
        disableAutoPan: true,
        pixelOffset: new google.maps.Size(-45, 0),
        position: centerPosition,
        closeBoxURL: "",
        isHidden: false,
        enableEventPropagation: true
    };

    var label = new InfoBox(myOptions);
    label.open(map);

    google.maps.event.addListener(circle, 'center_changed', function () {
        label.setPosition(circle.getCenter());
    });

}



    </script>
    </head>
    <body>
        <p>From all the links retrieved using Google API , only the unique links were counted and represented on the map </p>
        <div id="map-canvas" ></div>
    </body>
    </html>

But this doesnot work . Can anyone please help me fix this . FOr each circle I have to add different text Trying to read a csv and represent the data on Google Maps using Google Maps API

Upvotes: 1

Answers (1)

Suchit kumar

Reputation: 11869

your code got some error and problem with logic also try implementing this:and also make sure that you have added infobox.js file.This should show you the label with each circle.

 function csvToJS(csv) {
        var resp=[];
        var rows = csv.split('\n');
         for(var i=0;i<rows.length;i++){
             var row=rows[i].split(',');
             row[0]=row[0].trim();
            resp[i]=row;
    console.log(resp);
         }
         return resp;
     }
    var citymap;
    var req = new XMLHttpRequest();
    var file = 'https://cdn.rawgit.com/agershun/alasql/version-0.0.36/examples/csv/demo.csv';
    req.open('GET', file, true);
    req.send();
    req.onreadystatechange = function() {
        if (req.status == 200) {
           var csv = req.responseText;
          var data = csvToJS(csv);

           citymap = data;

        }
        initialize();

    };

        var cityCircle;

        function initialize() {
            // Create the map.
            var mapOptions = {
                zoom : 5,
                center : new google.maps.LatLng(37.09024, -95.712891),
                mapTypeId : google.maps.MapTypeId.ROADMAP
            };

            var map = new google.maps.Map(document.getElementById('map-canvas'),
                    mapOptions);


            var loop = 0;
            for (i = 0; i < citymap.length; i++) {
                var populationOptions = {
                    strokeColor : '#000000',
                    strokeOpacity : 0.8,
                    strokeWeight : 2,
                    fillOpacity : 0.35,
                    map : map,
                    center : new google.maps.LatLng(citymap[i][1], citymap[i][2]),
                    //radius : Math.sqrt(citymap[i][3]) * 20000 
                    radius : citymap[i][3] * 9000 
                };

                cityCircle = new google.maps.Circle(populationOptions);
                loop = loop + 1;

           
       var labelText = '<div style="color: #FFF">Text goes here</div>';

    var myOptions = {
        content: labelText,
        boxStyle: {
            background: '#000',
            border: "1px solid black",
            textAlign: "center",
            fontSize: "8pt",
            width: "90px"
        },
        disableAutoPan: true,
        pixelOffset: new google.maps.Size(-45, 0),
        position: populationOptions.center,
        closeBoxURL: "",
        isHidden: false,
        enableEventPropagation: true
    };

    var label = new InfoBox(myOptions);
    label.open(map);

    google.maps.event.addListener(cityCircle, 'center_changed', function () {
        label.setPosition(cityCircle.getCenter());
    });
            }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
     <script type="text/javascript" src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobox/src/infobox.js"></script>
<div id="map-canvas" style="width: 100%; height: 400px"></div>

Upvotes: 1

Add text to Circles in Google Maps API not working

Answers (1)

Related Questions