🎉 2.0.0

[giorgiabosello]

💥 Breaking Changes

Library has completely been rewritten in Typescript!

🚧 Builded with tsup
✏️ Fully typed
🔥 PropTypes removed
⬆️ Dependencies upgrade (see below)

What's Changed

• ⬆️ Bump gh-pages from 5.0.0 to 6.0.0 by @dependabot in ⬆️ Bump gh-pages from 5.0.0 to 6.0.0 #93
• ⬆️ Bump @babel/preset-env from 7.22.10 to 7.22.14 by @dependabot in ⬆️ Bump @babel/preset-env from 7.22.10 to 7.22.14 #105
• ⬆️ Bump typescript from 5.1.6 to 5.2.2 by @dependabot in ⬆️ Bump typescript from 5.1.6 to 5.2.2 #106
• ⬆️ Bump prettier from 3.0.2 to 3.0.3 by @dependabot in ⬆️ Bump prettier from 3.0.2 to 3.0.3 #107
• ⬆️ Bump eslint-plugin-n from 16.0.1 to 16.0.2 by @dependabot in ⬆️ Bump eslint-plugin-n from 16.0.1 to 16.0.2 #108
• ⬆️ Bump @babel/eslint-parser from 7.22.10 to 7.22.11 by @dependabot in ⬆️ Bump @babel/eslint-parser from 7.22.10 to 7.22.11 #104

Full Changelog: 1.4.2...2.0.0-alpha.0

---

This discussion was created from the release 2.0.0-alpha.0.

---

🙏🏼 Since I'm new to Typescript, I would really need some feedback. Thank you!

[Zak-JS]

Just wanted to say good work!

[giorgiabosello]

Thank you!

[melloware]

@giorgiabosello absolutely fantastic work and we all appreciate keeping this library up to date and I am very happy its with Typescript!

[leomar-developer]

Is there a way to reference all the types defined within this package? I plan to use this library but I need to build some types on top of the ones used internally by this package, tried something like:

import { MapProps } from 'google-maps-react-markers'

But did not work, is there a separate package with the types?

[giorgiabosello]

@leomar-developer nope, not yet. I forgot to export them. Give me a few hours and I'll update the repository and get back to you.
Thanks

[leomar-developer]

Thank you @giorgiabosello ! looking forward to it

[giorgiabosello]

@leomar-developer released in version 2.0.1. Let me know if everything's right :)

[leomar-developer]

@giorgiabosello exactly what I needed, thanks a lot!

[parvejkhan-seraphic]

i want to show popup and infowindow when i hover and click on marker how can i achieve this

[giorgiabosello]

@parvejkhan-seraphic You need to manage them by yourself in your Marker component. Props are forwarded :)

[yoyoyo8x]

Thank you for the wonderful work. Does this package support localization? I want to change it to Korean.

[giorgiabosello]

@yoyoyo8x yes, just pass in language props in externalApiParams. eg.:

<GoogleMap
  ...
  externalApiParams={{ region: 'JP', language: 'ja' }}
/>

[yoyoyo8x]

Thanks a lot!

[sbayeganeh]

How do I get coordinates of a point when I click on the map but not a Marker?

[giorgiabosello]

See here

[andrikash]

thank you very much, you're amazing!

[shellbryson]

This has been super useful on one project. It would be amazing if support for mapIDs was rolled into this. Custom styling requires a mapId in addition to the API key. I've been trying to figure out how to make that work with little luck.

[giorgiabosello]

Hi @shellbryson do you mean on the Google Maps API script? If I forward the mapId, where do you need it then?

[shellbryson]

You can pass an ID for a particular map when using Google's API directly. This generates a styled map:

function initMap() {
  new google.maps.Map(document.getElementById("map"), {
    mapId: "8e0a97af9386fef",
    center: { lat: 48.85, lng: 2.35 },
    zoom: 12,
  });
}

[giorgiabosello]

@shellbryson gotcha! Google Maps options are directly forwarded to the Map instance with the prop options.
E.g.

<GoogleMap
  {...props}
  options={{ mapId: "8e0a97af9386fef" }}
/>

You can see the code here. :)

[shellbryson]

So it does. That works perfectly for me, and I really should've spotted that 😂 Perhaps more coffee next time... Thank you!