Native Google Maps infowindow HTML

Ionic Native
1

Hi guys I’m trying to use the Google Maps native plugin, the problem is that I can’t set the infowindow to work with html snippets, let me show an example:

    this.map.addMarker({
      snippet: this.snippet,
      icon: {
        url: './assets/images/iconemarco.png',
        size: {
          width: 30,
          height: 35
        }
      },
      position: positionTeste,
    })

snippet is defined as: snippet: string = 'This is <b>HTML</b>'

And this is how the window is look like:

image
Screen Shot 2017-06-19 at 17.10.22.png642×784 188 KB

How can I make the plugin understand that the text inside is an HTML snippet, tried everything already, any hints? Thanks in advance.

2

My ionic info:

global packages:

    @ionic/cli-utils : 1.4.0
    Cordova CLI      : 7.0.1 
    Ionic CLI        : 3.4.0

local packages:

    @ionic/app-scripts              : 1.3.7
    @ionic/cli-plugin-cordova       : 1.4.0
    @ionic/cli-plugin-ionic-angular : 1.3.1
    Cordova Platforms               : android 6.2.3 ios 4.4.0
    Ionic Framework                 : ionic-angular 3.2.1

System:

    Node       : v7.7.1
    OS         : macOS Sierra
    Xcode      : Xcode 8.3.3 Build version 8E3004b 
    ios-deploy : 1.9.1 
    ios-sim    : 5.1.0 
    npm        : 4.1.2

and package.json

"dependencies": {
        "@angular/common": "4.1.0",
        "@angular/compiler": "4.1.0",
        "@angular/compiler-cli": "4.1.0",
        "@angular/core": "4.1.0",
        "@angular/forms": "4.1.0",
        "@angular/http": "4.1.0",
        "@angular/platform-browser": "4.1.0",
        "@angular/platform-browser-dynamic": "4.1.0",
        "@ionic-native/camera": "^3.9.2",
        "@ionic-native/core": "3.7.0",
        "@ionic-native/facebook": "^3.9.2",
        "@ionic-native/geolocation": "^3.12.1",
        "@ionic-native/google-maps": "^3.12.1",
        "@ionic-native/native-geocoder": "^3.12.1",
        "@ionic-native/social-sharing": "^3.10.3",
        "@ionic/storage": "2.0.1",
        "angular2-text-mask": "^8.0.0",
        "cep-promise": "^2.0.4",
        "cordova-android": "^6.2.3",
        "cordova-ios": "^4.4.0",
        "cordova-plugin-add-swift-support": "^1.6.0",
        "cordova-plugin-camera": "^2.4.1",
        "cordova-plugin-compat": "^1.1.0",
        "cordova-plugin-console": "^1.0.7",
        "cordova-plugin-device": "^1.1.6",
        "cordova-plugin-facebook4": "^1.9.1",
        "cordova-plugin-geolocation": "^2.4.3",
        "cordova-plugin-googlemaps": "git+https://github.com/mapsplugin/cordova-plugin-googlemaps.git#multiple_maps",
        "cordova-plugin-googlemaps-sdk": "git+https://github.com/mapsplugin/cordova-plugin-googlemaps-sdk.git",
        "cordova-plugin-ios-non-exempt-encryption": "^1.0.0",
        "cordova-plugin-nativegeocoder": "^1.0.2",
        "cordova-plugin-splashscreen": "^4.0.3",
        "cordova-plugin-statusbar": "^2.2.3",
        "cordova-plugin-whitelist": "^1.3.2",
        "cordova-plugin-x-socialsharing": "^5.1.8",
        "cordova-sqlite-storage": "^2.0.4",
        "es6-promise-plugin": "^4.1.0",
        "ionic-angular": "3.2.1",
        "ionic-native": "2.4.1",
        "ionic-plugin-keyboard": "^2.2.1",
        "ionicons": "3.0.0",
        "moment": "^2.18.1",
        "phonegap-plugin-push": "^1.10.5",
        "rxjs": "5.1.1",
        "sw-toolbox": "3.6.0",
        "zone.js": "0.8.10"
    }
3

After a long search, I saw that the HTMLinfoWindow class from cordova-plugin-googlemaps is missing from the ionic native google maps, so waiting for this to happen, thanks

4

Hey, I am having the same issue still now, did you found any other way to achieve what you wanted ?
thanks

5

I ended up using the javascript version of the google maps and worked, although I guess there’s a new version of the ionic-native plugin that supports this feature now, have a look at the github project ionic-native.

6 
let htmlInfoWindow = new HtmlInfoWindow();
let frame: HTMLElement = document.createElement('div');
frame.innerHTML = [
  '<h3>Hearst Castle</h3>',
  '<img src="assets/imgs/hearst_castle.jpg">'
].join("");
frame.getElementsByTagName("img")[0].addEventListener("click", () => {
  htmlInfoWindow.setBackgroundColor('red');
});
htmlInfoWindow.setContent(frame, {width: "280px", height: "330px"});

this.map.addMarker({
  position: {lat: 35.685208, lng: -121.168225},
  draggable: true,
  disableAutoPan: true
}).then((marker: Marker) => {
  marker.on(GoogleMapsEvent.MARKER_CLICK).subscribe(() => {
    htmlInfoWindow.open(marker);
  });
});
5 Likes