• Das Erstellen neuer Accounts wurde ausgesetzt. Bei berechtigtem Interesse bitte Kontaktaufnahme über die üblichen Wege. Beste Grüße der Admin

InfoBubble Close Icon ersetzen

The_C

Member
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.

PHP:
// 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:

PHP:
 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?
 
Zuletzt bearbeitet:
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?
 
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

PHP:
// 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:

PHP:
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:

PHP:
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???

PHP:
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"
  });
 
Zuletzt bearbeitet:
OK ich hab es :)

PHP:
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"
  });
 
Zuletzt bearbeitet:
Zurück
Oben