Google Map Radius around Marker

StackOverflow https://stackoverflow.com/questions/23596205

  •  20-07-2023
  •  | 
  •  

Question

I have markers I get from my XML file

In the XML file i have a distance which is the radius around the marker I am trying to get the Radius but not sure how to tell it to use the distance as the radius

My map HTML file is as follow map.html

 <html xmlns="http://www.w3.org/1999/xhtml">
   <head>
     <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
     <title>Google Maps AJAX + mySQL/PHP Example</title>
     <script src="http://maps.google.com/maps/api/js?sensor=false"
        type="text/javascript"></script>
     <script type="text/javascript">
     //<![CDATA[

     var customIcons = {
       restaurant: {
    icon: 'http://labs.google.com/ridefinder/images/mm_20_blue.png',
    shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png'
       },
      bar: {
        icon: 'http://labs.google.com/ridefinder/images/mm_20_red.png',
       shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png'
     }
     };

     function load() {
       var map = new google.maps.Map(document.getElementById("map"), {
         center: new google.maps.LatLng(-26.2615, 28.2037),
         zoom: 13,
         mapTypeId: google.maps.MapTypeId.ROADMAP
       });
       var infoWindow = new google.maps.InfoWindow();

       // Change this depending on the name of your PHP file
       downloadUrl("map_xml.php", function(data) {
         var xml = data.responseXML;
         var markers = xml.documentElement.getElementsByTagName("marker");
         for (var i = 0; i < markers.length; i++) {
           var lbs_msisdn = markers[i].getAttribute("lbs_msisdn");
           var date_time = markers[i].getAttribute("date_time");
           var distance = markers[i].getAttribute("distance");
           var point = new google.maps.LatLng(
               parseFloat(markers[i].getAttribute("lat")),
               parseFloat(markers[i].getAttribute("lng")));
           var html = "<b>" + lbs_msisdn + "</b> <br/>" + distance ;
           var icon = customIcons['simple'] || {};
         var marker = new google.maps.Marker({
           map: map,
           position: point,
           icon: icon.icon,
           shadow: icon.shadow
         });
var cirlcle = new google.maps.Circle({
       strokeColor: "#00F",
       strokeOpacity: 0.8,
       strokeWeight: 1,
       fillColor: "#00F",
       fillOpacity: 0.10,
    map: map,
       center: point,
    radius: <?php echo $distance?> // But cannot Echo in HTML so not sure how to get radius
           bindInfoWindow(marker, map, infoWindow, html);
         }
       });
      }

     function bindInfoWindow(marker, map, infoWindow, html) {
       google.maps.event.addListener(marker, 'click', function() {
         infoWindow.setContent(html);
         infoWindow.open(map, marker);
       });
     }

     function downloadUrl(url, callback) {
       var request = window.ActiveXObject ?
           new ActiveXObject('Microsoft.XMLHTTP') :
           new XMLHttpRequest;

       request.onreadystatechange = function() {
         if (request.readyState == 4) {
           request.onreadystatechange = doNothing;
           callback(request, request.status);
         }
       };

        request.open('GET', url, true);
        request.send(null);
     }

     function doNothing() {}

     //]]>
   </script>
   </head>

   <body onload="load()">
     <div id="map" style="width: 500px; height: 300px"></div>
   </body>
   </html>

On other maps I just Echo the distance but pulling it from XML is new to me Need the distance as the new radius any assistance would be appreciated

Was it helpful?

Solution

attributes usually are strings, but the radius is expected to be a Number.

Convert it into a Number:

var cirlcle = new google.maps.Circle({
                strokeColor   : "#00F",
                strokeOpacity : 0.8,
                strokeWeight  : 1,
                fillColor     : "#00F",
                fillOpacity   : 0.10,
                map           : map,
                center        : point,
                radius        : Math.round(distance)
              });
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top