Overlaying an SVG maker on top of Google Maps

<!DOCTYPE html>
<html> 
<head> 
  <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> 
  <title>Google Maps Multiple Markers</title>

<style>

#map {
  margin:20px auto;
}
.reddot{

width:66px;
    height:66px;
    position:absolute
}
.locater{
  position: absolute;
  top: 18px;
  left: 17px;
}
.mark{
    fill: none;
    stroke: #FF9100;
    stroke-width: 1px;
    cursor: pointer;
    z-index: 1000;
}

</style>

];

var lat_center = 24.31026,
        long_center = 93.56268;

var map = new google.maps.Map(document.getElementById('map'), {
      zoom: 8,
      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][1], locations[i][2]),
          map: map

});

text = locations[i][0];

if(locations[i][1] === lat_center && locations[i][2] === long_center) {
        marker.setAnimation(google.maps.Animation.DROP);
        marker.setIcon('https://maps.gstatic.com/intl/en_ALL/mapfiles/markers2/boost-marker-mapview.png');

map.Overlay= new google.maps.OverlayView();

map.Overlay.center_ = new google.maps.LatLng(lat_center, long_center);
        map.Overlay.reddot_ =  '<div id="reddot" class="reddot" style="position:relative;"><svg class="marker" 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><img src="https://www.google.com/intl/en_us/mapfiles/ms/micons/red-dot.png" class="locater"></svg></div>';

map.Overlay.draw = function () {
            var pixelposition = this.getProjection().fromLatLngToDivPixel(this.center_);
            jQuery('#reddot').css({top:(pixelposition.y-50), left:(pixelposition.x-33)});

};

map.Overlay.onAdd=function() {
          var self=this;
          jQuery(self.getPanes().markerLayer).append(self.reddot_);
        };

map.Overlay.setMap(map);

}

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

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

Modified http://maps.google.com/maps/api/js?sensor=false to a secure url

Modified http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js to a secure url

https://maps.google.com/maps/api/js?sensor=false

https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js