InfoBubble Close Icon ersetzen

[The_C]

Hallo,

wie ersetzt man im JS das Image für den Close Button gegen ein <i class="fa fa-times" aria-hidden="true"></i>

Hier der Code in dem ich das machen möchte das ist jetzt noch als createElement('IMG') beschrieben wenn ich jetzt createElement('i') schreibe wird der Quelltext schon mal so ausgegeben <i aber sonst auch nix.

// Close button
  var close = this.close_ = document.createElement('IMG');
  close.title = 'schließen';
  close.style['position'] = 'absolute';
  close.style['width'] = this.px(12);
  close.style['height'] = this.px(12);
  close.style['border'] = 0;
  close.style['zIndex'] = this.baseZIndex_ + 1;
  close.style['cursor'] = 'pointer';
  close.src = '/Images/close_button_map.gif';

und bei diesem Code möcht ich das auch machen der ist aus Google maps überall da wo ein Image Pfad eingebunden ist möcht ich das mit fa icons ersetzen:

 var image = new google.maps.MarkerImage('/Images/home.png',
    /* Bilddimensionen */
    new google.maps.Size(12, 12),
    /* Ursprung = obere linke Ecke */
    new google.maps.Point(0, 0),
    /* Ankerpunkt auf den Koordinaten */
    new google.maps.Point(12, 12));

  var shadow = new google.maps.MarkerImage('/Images/logo_mapshadow.png',
    /* Bilddimensionen */
    new google.maps.Size(195, 67),
    /* Ursprung = obere linke Ecke */
    new google.maps.Point(0, 0),
    /* Ankerpunkt auf den Koordinaten */
    new google.maps.Point(58, 67));

  var marker = new google.maps.Marker({
    position: myLatlng,
    map: map,
    icon: image,
    shadow: shadow,
    title: "Was weis ich wer du bist"
  });

Ist das den überhaupt machbar?

 

[mikdoe]

Das i Tag ist ja nur eine Textauszeichnung und entspräche einem CSS font-style:italic;.
Was soll denn genau rauskommen? Also wie soll das aussehen? Text, Button oder Image?

 

[The_C]

Also ich möchte diese ganzen hardcode Pfade gegen die Font Awesome ersetzen ich denke dann müsste das ein Button sein denke ich zumindest weil momentan ist es ja überall im Code ein IMG.

new google.maps.MarkerImage = der/pfad/zum/Image.img

var close = this.close_ = document.createElement('IMG');

und damit man die verschiedenen ICONS bekommt muss das so geschrieben werden damit man das Font Awesome anspricht <i class="fa fa-times" aria-hidden="true"></i> das wär dann das X z.b

- - - Aktualisiert - - -

Ich glaub ich hab es für den ersten Code zumindest wird ein x sichtbar

// Close button
  var close = this.close_ = document.createElement('button');
  close.title = 'schließen';
  close.style['position'] = 'absolute';
  close.style['width'] = this.px(12);
  close.style['height'] = this.px(12);
  close.style['border'] = 0;
  close.style['marginTop'] = this.px(-8);
  close.style['zIndex'] = this.baseZIndex_ + 1;
  close.style['cursor'] = 'pointer';
  close.innerHTML = '<i class="fa fa-times" aria-hidden="true"></i>'

- - - Aktualisiert - - -

Nur wie das bei 2ten Code gemacht wird komm ich nicht drauf:

var image = new google.maps.MarkerImage('https://mt.google.com/vt/icon/name=icons/spotlight/home_L_8x.png&scale=1',
    /* Bilddimensionen */
    new google.maps.Size(24, 24),
    /* Ursprung = obere linke Ecke */
    new google.maps.Point(0, 0),
    /* Ankerpunkt auf den Koordinaten */
    new google.maps.Point(12, 12));

  var shadow = new google.maps.MarkerImage('../Images/logo_mapshadow.png',
    /* Bilddimensionen */
    new google.maps.Size(195, 67),
    /* Ursprung = obere linke Ecke */
    new google.maps.Point(0, 0),
    /* Ankerpunkt auf den Koordinaten */
    new google.maps.Point(58, 67));

  var marker = new google.maps.Marker({
    position: myLatlng,
    map: map,
    icon: image,
    shadow: shadow,
    title: "Mein Betrieb"
  });

Auch für diesen Code hab ich es geschafft die Font Awesome Icons zu verwenden:

startIcon = new google.maps.Marker({
        position: dirRenderer.directions.routes[0].legs[0].start_location,
        map: map,
        label: {
          fontFamily: 'Fontawesome',
          text: '\uf192', //code for font-awesome icon
          fontSize: '15px',
          color: 'red'
        },
        icon: {
          path: google.maps.SymbolPath.CIRCLE, //or any others
          scale: 0
        },
        title: 'Start'
      });

Jetzt bleibt nur noch die Frage wie macht man das für diesen Code???

var image = new google.maps.MarkerImage(
    'https://mt.google.com/vt/icon/name=icons/spotlight/home_L_8x.png&scale=1',
    /* Bilddimensionen */
    new google.maps.Size(24, 24),
    /* Ursprung = obere linke Ecke */
    new google.maps.Point(0, 0),
    /* Ankerpunkt auf den Koordinaten */
    new google.maps.Point(12, 12)
  );
var marker = new google.maps.Marker({
    position: myLatlng,
    map: map,
    icon: image,
    shadow: shadow,
    title: "Mein Betrieb"
  });

 

[mikdoe]

Hast du beim letzten auch mal diese label:... Angabe wie beim vorletzten versucht?

 

[The_C]

OK ich hab es

var image = {
    url: '',
    size: new google.maps.Size(36, 36),
    //origin: new google.maps.Point(10, 10),
    anchor: new google.maps.Point(0, 0),
    labelOrigin: new google.maps.Point(12, 12),
  };

  var marker = new google.maps.Marker({
    position: myLatlng,
    map: map,
    icon: image,
    label: {
      fontFamily: 'Fontawesome',
      text: '\uf015', //code for font-awesome icon Home
      fontSize: '35px',
      color: 'gray'
    },
    //shadow: shadow,
    title: "was weis ich"
  });