google mapにhtml要素を埋め込みたい。

現在、google map apiを使用して、mapの表示、markerの表示はできています。

実現したい機能として、マーカーの代わりに文字列(情報ウインドウのイメージ)を表示させたいと思っています。

・実装しているマーカ

・実装したいマーカのイメージ

動的に表示する値を変化させて、表示したいと考えております。
また、現在の実装だとchromeの開発者ツールで確認すると実装しているマーカではHTML要素として認識されていませんが、実装したいマーカ(Airbnbを参考にさせていただきました)では要素として認識されています。

どなたか上記の知見がある方、いらっしゃいましたらご教授いただけますようお願いします。

以下は現在の実装のjsです。

$(function(){
  var hidden_keyword = gon.keyword;
  if (hidden_keyword.length) {
    var geocoder = new google.maps.Geocoder();
    geocoder.geocode({ "address": hidden_keyword }, function(results, status){
      if (status == google.maps.GeocoderStatus.OK) {
        var lat = results[0].geometry.location.lat().toFixed(6);
        var lng = results[0].geometry.location.lng().toFixed(6);
        var mapOpt = {
          center: new google.maps.LatLng(lat, lng),
          zoom: 15,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        var map = new google.maps.Map(document.getElementById("map-canvas"),mapOpt);
        $(gon.latlng).each(function(i){
          var latlng = new google.maps.LatLng( gon.latlng[i].lat, gon.latlng[i].lng, false );
          var marker_i = new google.maps.Marker({
          map: map,
          position: latlng
          });
        });
      }else {
        alert("地名が入力されなかった為、検索できませんでした。");
      }
    });
  }
});