Ionic-native-google-maps: I can put a dynamic photo in google maps marker

[renanmoraes]

I'm submitting a ... (check one with "x")

• [x] question
• [ ] any problem or bug report
• [ ] feature request

If you choose 'problem or bug report', please select OS: (check one with "x")

• [x] Android
• [x] iOS

Expected behavior:
I need to put custom photos in the marker, each user plotted on the map would colacaria your photo.

Would you like to do this using the plugin? If so would you have an example of how to do it?

[wf9a5m75]

The maps plugin only takes care about map. Generating images is out of scope of this plugin.

However, you can specify base64 encoded strings as marker icon.
Generate images using <canvas>, then export as base64 encoded strings.

Here is example of cordova-plugin-googlemaps, but it is the same as @ionic-native/google-maps.
https://github.com/mapsplugin/cordova-plugin-googlemaps-doc/blob/master/v2.3.0/class/Marker/README.md#base64-encoded-icon

[renanmoraes]

Thanks, I'll test if I have a nice result I put here to complete the question.

[Uctech]

Please, any example on how to integrate Google places with ionic-native/google-maps plugin

[wf9a5m75]

@renanmoraes ping

[renanmoraes]

I have not had success yet, I'll start working on it now.

[renanmoraes]

My friend, what I am really asking and the question asked does not influence this, but I have never seen this integration.

The maximum I got was with the use of the places, but the operation is a search, and I could not do it with ionic native, I got it with the direct plugin of the website, passing the link in the index, this is the index:

<script src = "https: //maps.googleapis.com/maps/api/js?key=key&v=3.exp&libraries=places ">
  </ script>

 ### TYPESCRIPT
mapsReady(maps) {
    this.map = maps;
    this.autocompleteService = new google.maps.places.AutocompleteService();
    this.placesService = new google.maps.places.PlacesService(maps);
    this.searchDisabled = false;
  }

  selectPlace(place) {
    this.places = [];

    let location = {
      lat: null,
      lng: null,
      name: place.name
    };

    this.placesService.getDetails({placeId: place.place_id}, (details) => {

      this.zone.run(() => {

        location.name = details.name;
        location.lat = details.geometry.location.lat();
        location.lng = details.geometry.location.lng();

        console.log(location)

        this.map.setCenter({lat: location.lat, lng: location.lng});

        this.address = {
          formatedAddress: location.name,
          latlng: new google.maps.LatLng(location.lat, location.lng)
        };

        if (!this.marker) {
          this.marker = new google.maps.Marker({
            map: this.map,
            animation: google.maps.Animation.DROP,
            position: this.address.latlng
          });
        } else {
          this.marker.setMap(null);
          this.marker = new google.maps.Marker({
            map: this.map,
            animation: google.maps.Animation.DROP,
            position: this.address.latlng
          });
        }

        this.placeSelected = true;

        this.sendInformationFormAddress();
      });

    });
  }

  searchPlace() {
    if (this.address.formatedAddress.length > 0 && !this.searchDisabled) {

      let config = {
        types: ['geocode'],
        input: this.address.formatedAddress
      };

      this.autocompleteService.getPlacePredictions(config, (predictions, status) => {

        if (status == google.maps.places.PlacesServiceStatus.OK && predictions) {

          this.places = [];

          predictions.forEach((prediction) => {
            this.places.push(prediction);
          });
        }

      });

    } else {
      this.places = [];
    }

  }

### HTML

<!--Fluxo de inserção do voucher do motorista-->
<ion-list id="sevenRegister" *ngIf="param === 'add_address'">
  <ion-item>
    <ion-label color="graphite" stacked>ENDEREÇO</ion-label>
    <ion-input type="text" placeholder="Rua Maria Matos, 345 - Centro, Ipatinga/MG"
               [(ngModel)]="address.formatedAddress"
               (keyup)="searchPlace()"
    ></ion-input>
  </ion-item>
  <ion-list>
    <ion-item *ngFor="let place of places" (touchstart)="selectPlace(place)">{{place.description}}</ion-item>
  </ion-list>

  <page-google-map (googleMapsReady)="mapsReady($event)" [loadingMapsNative]="'false'"></page-google-map>
</ion-list>

With this you will have a search bar that when you type it completes the list and when you click on the map the selected address. I do not know if that's what you want.

[renanmoraes]

Here is an example that can help us to make the marker, well explained, perfect.

https://stackoverflow.com/questions/23965161/js-maps-v3-custom-marker-with-user-profile-picture

[Uctech]

@renanmoraes Thanks a lot.