How to add Overlaying rectangular SVG blinking border to a particular marker(center) on Google Maps

问题

I have different Names and Latitude and logitude and now i want to highlight the particular marker with Blinking rectangular border, than we can add the SVG Code to the particular marker. But I don't know the SVG code Can any one suggest how to add.

How to add the Overlaying SVG blinking rectangular Border with Blinking to a particular marker,

<html>
<head> 
 <script src="http://maps.google.com/maps/api/js?sensor=false"  type="text/javascript"></script>
</head> 


<body>
  <div id="map" style="width: 1330px; height: 850px;"></div>

  <script type="text/javascript">
    var locations = [
                            STHOWBGA01_ATIF_RNID_L015,24.31026,93.56268,
                            SWKHMRID01_BILF_RNID_L039,25.65182,91.62737,
                            SMOKZUNB01_GTLF_RNID_L006,26.019,94.53,
                            SDIMSGRN01_ATCF_RNID_L023,25.8271,93.6853,
                            SKOHKRMA01_BILF_RNID_L010,25.5815,94.21959,
                            SMOKANGB01_BILF_RNID_L001,26.214,94.6876,
                            SDIMDIM087_ATIF_TTID_L026,25.8939,93.7602,
                            SWKHLYNKI1_GTLF_RNID_L061,25.5041,91.6109,
                            SIMWIMP109_ATCF_TTOD_L047,24.83982,93.97707,
                            SDIMZLUKI2_ATCF_RNID_L017,25.63998,93.66512,
                            GWTRTLMUR5_BILF_RNOD_L039,23.841,91.6202,
                            GWTRKLBRI1_BILF_RNOD_L017,23.50866,91.26185,
                            GWTRBXNGR1_BILF_RNOD_L033,23.61268,91.17243,
                            GWTRAGR101_BILF_TTOD_L055,23.8655,91.25584,
                            GWTRBIS007_BILF_RNOD_L022,23.6785,91.2963
                    ];

        var map = new google.maps.Map(document.getElementById('map'), {
          zoom: 17,
          center: new google.maps.LatLng(24.31026,93.56268),

          mapTypeId: google.maps.MapTypeId.ROADMAP
        });



        var infowindow = new google.maps.InfoWindow();

        var marker, i;

        for (i = 0; i < locations.length; i++) {  
          marker = new google.maps.Marker({
            position: new google.maps.LatLng(locations[i][1], locations[i][2]),
            map: map
          });



          google.maps.event.addListener(marker, 'mouseover', (function(marker, i) {
            return function() {
              infowindow.setContent(locations[i][0]);
              infowindow.open(map, marker);
            }
          })(marker, i));
    }
    google.maps.event.addDomListener(window, 'load', LatLng);
  </script>
    <div id="map-canvas"></div>
</body>
</html>

Please suggest, Thanks.

回答1:

You would need to create an SVG symbol as you desire first and then associate them with the markers. Although I think you would have to make the custom icon and embed it in the marker class because if you want to customize the marker icons you can only customize them as a whole and not just put border on it. Here's the SVG docs to create your custom marker icon. And, here's the sample code from Google to embed them in you marker class.

Hope this helped.

来源：https://stackoverflow.com/questions/27167295/how-to-add-overlaying-rectangular-svg-blinking-border-to-a-particular-markercen

标签

javascript

jquery

google-maps

svg

overlay