I have this link
http://www.google.com/intl/en_us/mapfiles/ms/micons/red-dot.png
which include this 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?
2
Answers
The the following code:
HTML:
and your javascript (You will be needed JQUERY )
http://jsfiddle.net/Muthukumaru/n4d80zLd –> jsfiddle link
Use the SVG code for the marker
border css