Hey, I have a problem with the google maps api and...

# javascript

[Hildebrandt Tobias]

Hey, I have a problem with the google maps api and the predefined marker symbols.
I looked at this this and I use <http://vis.gl/react-google-maps|vis.gl/react-google-maps>, but I also loaded googlemaps/js-api-loader .

If you look at the Marker example there is:

new google.maps.Marker({
    position: map.getCenter(),
    icon: {
      path: google.maps.SymbolPath.CIRCLE,
      scale: 10,
    },
    draggable: true,
    map: map,
  });

But I can't figure out how to aquire the predefined google.maps.SymbolPath.CIRCLE constant? object?
Just providing the path as a string doesn't work it says unexpected g at position 0 (the g from google I guess).

I tried

@file:JsModule("@googlemaps/js-api-loader")
@file:JsNonModule

package shared.utils.maps

@JsName("CIRCLE")
external val CIRCLE: dynamic

But that also doesn't work.

I know I can provide my own SVG and PNG and such, but it kinda irks me, someone got an idea?

Edit: Okay I added the npm https://www.npmjs.com/package/google-maps and added:

@file:JsModule("google-maps")
@file:JsNonModule

package shared.utils.maps

@JsName("CIRCLE")
external val CIRCLE: dynamic

But it seems that CIRCLE is null when I access it.

[Artem Kobzar]

It seems like you need also to use `@JsQualifier`:

@file:JsModule("@googlemaps/js-api-loader")
@file:JsNonModule
@file:JsQualifier("google.maps")

package shared.utils.maps

@JsName("CIRCLE")
external val CIRCLE: dynamic

[Hildebrandt Tobias]

With @googlemaps/js-api-loader I get

export 'google' (imported as 'google') was not found in '@googlemaps/js-api-loader' (possible exports: DEFAULT_ID, Loader, LoaderStatus)

in the build process.
And with google-maps There is no error in the build, but when opening the site I get

Uncaught TypeError: Cannot read properties of undefined (reading 'maps')

Sources:
https://www.npmjs.com/package/@googlemaps/js-api-loader
https://www.npmjs.com/package/google-maps

[Artem Kobzar]

Based on the README, you can't just import declarations from the library synchronously. So, the example of the Marker should look like this:

// google-maps wrapper file
@file:Suppress("WRONG_EXTERNAL_DECLARATION")
package google.maps

import kotlin.js.Promise
import kotlinx.js.JsPlainObject

external class GoogleMapsApi private constructor() {
    inner class Marker(options: MarkerOptions)
    val SymbolPath: SymbolPath
}

external interface SymbolPath {
    val CIRCLE: SymbolPath
}

external interface GoogleApi {
    val maps: GoogleMapsApi
}

external class Loader(opts: LoaderOptions) {
    fun load(): Promise<GoogleApi>
}

@JsPlainObject
external interface LoaderOptions {
    val apiKey: String
    val version: String?
    val libraries: Array<String>?
}

@JsPlainObject
external interface MarkerOptions {
    val draggable: Boolean
    val map: dynamic
    val position: dynamic
    val icon: IconOptions
}

@JsPlainObject
external interface IconOptions {
    val scale: Int
    val path: SymbolPath
}

And usage is like this:

suspend fun main() {
  val map = js("{}")
  val loader = Loader(LoaderOptions(apiKey = "YOUR_API_KEY"))
  val google = loader.load().await()
  val marker = google.maps.Marker(MarkerOptions(
    map = map,
    draggable = true,
    position = map.getCenter(),
    icon = IconOptions(
      path = google.maps.SymbolPath.CIRCLE,
      scale = 10,
    )
  ))
}

However, I've realized that without the Suppress it's impossible to describe such API (which is quite not day to day in JS world). So we definitely need to remove the limitations on external inner classes

[Hildebrandt Tobias]

Thank you for all that effort! I thought I was going crazy.

[Artem Kobzar]

Oh, I've realized that even with the suppress the generated code is not what you need. Give me 5 minutes more

[Artem Kobzar]

Oh, seems like we need to add support of external inner classes, cause it's impossible to describe the Marker class right now in a propper way without some reflection magic :C

[Hildebrandt Tobias]

Dang

[Hildebrandt Tobias]

I appreciate you looking into it though.
I think I'll provide some SVG for now.

[Hildebrandt Tobias]

Seems like this constellation of external inner classes doesn't come up often.