view and move custom markers in streetview

[smolleyes]

hi

thanks for this lib first :)

i got ~ everything working now but how can i see and move my markers in streetview? they are invisible now :( and drag not working when fullscreen enabled

thanks

[smolleyes]

i totally removed custom markers and used google markers with custom icons.. too much additional work with react components :)

thanks

[itsmichaeldiego]

@smolleyes Yeah its hard to make them work in other things like street view, this component was more for simple map displaying and not complex stuff like streetview

[hashmatmuqbil]

i totally removed custom markers and used google markers with custom icons.. too much additional work with react components :)

thanks

Hi,
How did you implement/use google markers with custom icons?

[smolleyes]

hi

i used svg to make the icon and just pass a color to it...

my addMarker function is like that now... (some part specific to my app... didn t cleaned it but nothing to hide... :)

addMarker = (place, maps, map) => { // maps = google api....

    console.log("addMarker asked with ", place);
    const places = this.state.places.filter(m => m.id);

    if (place.key === "headquarter") {
      return;
    }

    let icon = `data:image/svg+xml;charset=utf-8,  %3Csvg viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg"%3E       %3Cpath fill="${place.color ||
      "orange"}" data-name="layer1"       d="M32 2A24 24 0 0 0 8 26c0 .8 0 1.6.1 2.3v.3C10.1 47.6 32 62 32 62s21.9-14.6 23.8-33.3v-.4c.1-.8.1-1.5.1-2.3A24 24 0 0 0 32 2zm0 36a12 12 0 1 1 12-12 12 12 0 0 1-12 12z"        %3E%3C/path%3E       %3Cpath data-name="opacity" d="M11.2 27.6v-.3c-.1-.8-.1-1.5-.1-2.3A24 24 0 0 1 26 2.8 24 24 0 0 0 8 26c0 .8 0 1.6.1 2.3v.3C10.1 47.6 32 62 32 62l2.2-1.6c-4-2.8-21.4-16-23-32.8z"        fill="%23000032" opacity=".2"%3E%3C/path%3E       %3Cpath data-name="opacity" d="M20 26a12 12 0 0 1 3.9-8.9A12 12 0 1 0 37 36.9 12 12 0 0 1 20 26z"       fill="%23fff" opacity=".25"%3E%3C/path%3E       %3Cpath data-name="stroke" d="M55.9 28.3c.1-.8.1-1.5.1-2.3a24 24 0 0 0-48 0c0 .8 0 1.6.1 2.3v.3C10.1 47.6 32 62 32 62s21.9-14.6 23.8-33.3z"       fill="none" stroke="white" stroke-linecap="round" stroke-linejoin="round"       stroke-width="2"%3E%3C/path%3E       %3Ccircle data-name="stroke" cx="32" cy="26" r="12" fill="none" stroke="white"       stroke-linecap="round" stroke-linejoin="round" stroke-width="2"%3E%3C/circle%3E       %3C/svg%3E`;

    let sizew = 28;
    let sizeh = 28;
    let anchorw = 14;
    let anchorh = 14;

    if (place.id === "headquarter") {
      icon = SiegeMarker;
      sizew = 64;
      sizeh = 32;
      anchorw = 32;
      anchorh = 18;
    }

    console.log("before create marker", place);

    try {
      const marker = new maps.Marker({
        id: place.id,
        key: place.id,
        draggable:
          place.id && place.id.toString().match(/(headquarter|end)/)
            ? false
            : !!this.props.markersDraggables,
        animation: maps.Animation.DROP,
        icon: {
          anchor: new maps.Point(anchorw, anchorh),
          url: icon,
          scaledSize: new maps.Size(sizew, sizeh),
        },
        position: {
          lat: place.geometry ? place.geometry.location.lat() : place.position.lat(),
          lng: place.geometry ? place.geometry.location.lng() : place.position.lng(),
        },
        map,
        infowindow: new maps.InfoWindow({
          content: `<div style="min-width:350px;" id="${place.id}"></div>`,
          onOpen: this.windowHasOpened,
          onClose: this.windowHasClosed,
          visible: this.state.showingInfoWindow,
        }),
      });

      console.log("MARKER CREATED", marker);
      marker.infowindow.addListener("domready", async (e, i, r) => {
        ReactDOM.render(
          <InfoWindow {...this.props} infos={place} />,
          document.getElementById(this.state.activeMarker.id)
        );
      });

      marker.addListener("click", e => {
        console.log(this.state.activeMarker);
        console.log("marker clicked", e);
        marker.infowindow.open(map, marker);
        this.onMarkerClicked(marker);
      });

      marker.addListener("dragstart", () => {
        console.log("dragstart");
        try {
          marker.infowindow.close(map, marker);
          this.setState({
            showingInfoWindow: false,
          });
        } catch (err) {
          console.log(err);
        }
      });

      marker.addListener("dragend", async (e, r, s) => {
        console.log(
          "position changed",
          marker,
          marker.position.lat(),
          marker.position.lng()
        );
        if (marker.key && !marker.key.toString().match(/(headquarter|end|home|labo)/)) {
          console.log("dragend");
          this.onMarkerDragEnd(marker);
        } else {
          // // refresh type select
          // $('.pointIndexTypeSelect').val(marker.customInfos.type);
          // await editMarker(marker.position, marker, null);
          // await populateMarker(marker.customInfos.batId);
        }
      });

      this.setState({
        totalMarkers: places.length - 1,
        places: [...places, marker],
      });
    } catch (err) {
      console.log(err);
    }
  };