Photoshop Question posted in
The official user guide can be found here.

How to Include marker in SVG Blinking Rectangular or circle Border image in google maps – Photoshop

I have this link

http://www.google.com/intl/en_us/mapfiles/ms/micons/red-dot.png

which include this icon in google maps points to the particular location using the lat long,

Now I want to add the blinking border to this above marker link opens..

Is there any possible way to add the border blinking to the above marker in HTML,CSS, JQuery,

I above link opens the marker, I have done in jsfiddle

If possible provide me link in jsffidle

How to add the border for this marker in css and html, jquery and blink?

This is my code in google maps:

<!DOCTYPE html>
<html> 
<head> 
  <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> 
  <title>Google Maps Multiple Markers</title> 
  <script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script>
    </head> 
<body>
  <div id="map" style="width: 1000px; height: 600px;"></div>

  <script type="text/javascript">
    var locations = [
                            ['STHOWBGA01_ATIF_RNID_L015',24.31026,93.56268],
                            ['GWTRGOK004_BILF_RNOD_L023',23.70692,91.27397],
                            ['GWTRBLWBN1_BILF_RNOD_L038',24.0179,91.4529],
                            ['SJOWKHL007_ATIF_RNOD_L012',25.35197,92.3723],
                            ['TTINNMSAI4_VIOF_RNID_L011',27.66616,95.87926],
                            ['SIMWUKHRL5_VIOF_RNID_L061',25.12267,94.36558],
                            ['SDIMZLUKI3_BILF_RNOD_L035',25.63658,93.64943]

            ];

    var lat_center = 24.31026,
        long_center = 93.56268;

    var map = new google.maps.Map(document.getElementById('map'), {
      zoom: 10,
      center: new google.maps.LatLng(lat_center, long_center),
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });

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

    var marker, i, text;

    for (i = 0; i < locations.length; i++) {  

      marker = new google.maps.Marker({
          position: new google.maps.LatLng(locations[i][3], locations[i][2]),
          map: map
      });

      text = locations[i][0];

      if(locations[i][4] === lat_center && locations[i][2] === long_center) {

          marker.setAnimation(google.maps.Animation.DROP);
          marker.setIcon('http://maps.google.com/mapfiles/arrow.png ');
        //text += '<br>' + 'Additionl text for centered marker';
      }

      google.maps.event.addListener(marker, 'mouseover', (function(marker, text) {
        return function() {
          infowindow.setContent(text);
          infowindow.open(map, marker);
        }
      })(marker, text));
    }

  </script>
</body>
</html>

I want to plot for the lat_center and long_center, now in this
marker.setIcon in this I have to make a change in marker.seticon

Is it possible with multiple markers in google maps?

Tags:

2

Answers


  1. 0

    The the following code:

    HTML:

      <style type="text/css">
    .with_border {
       border:2px solid red;
     }
   </style>

  <div>

<p>click on the image to blink</p>

<img id="border_icon" onclick="show()" class="" src="http://www.google.com/intl/en_us/mapfiles/ms/micons/red-dot.png">


 </div>

    and your javascript (You will be needed JQUERY )

    <script type="text/javascript">
    var blinkRate=500;

    function removeBorder(){
       $("#border_icon").removeClass("with_border");
       setTimeout(showBorder,blinkRate);

    }
 function showBorder(){
       $("#border_icon").addClass("with_border");
       setTimeout(removeBorder,blinkRate);
    }

   $('#border_icon').click(function() {
       $('#border_icon').addClass("with_border");

       setTimeout(removeBorder,blinkRate);
  });

</script>
    Login or Signup to reply.
  2. 0

    http://jsfiddle.net/Muthukumaru/n4d80zLd –> jsfiddle link

    Use the SVG code for the marker

    <svg class="marker" style="left: 300.779px; top: 95.16px;" height="66" width="66">
    <circle cy="33" cx="33" class="mark" r="25">
       <set id="show" attributeName="visibility" attributeType="CSS" to="visible"
         begin="0s; hide.end" dur="1s" fill="freeze"/>

        <set id="hide" attributeName="visibility" attributeType="CSS" to="hidden"
         begin="show.end" dur="1s" fill="freeze"/>
     </circle>

   <image x="18" y="-5" width="30" height="80"
     xlink:href="http://www.google.com/intl/en_us/mapfiles/ms/micons/red-dot.png" />     
 </svg>

    border css 

        .mark{
    fill: none;
stroke: #FF9100;
stroke-width: 1px;
cursor: pointer;
z-index: 1000;
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search