Google Map Radius around Marker

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

  •  20-07-2023
  •  | 
  •  

Domanda

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

È stato utile?

Soluzione

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)
              });
Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top