Maps: InfoWindows not appearing

[gigo6000]

Environment details

1. Api Maps
2. Ubuntu/React
3. MarkerWithLabel Version ^2.0.14

Steps to reproduce

1. Go to the basic example: https://googlemaps.github.io/js-markerwithlabel/examples/basic.html
2. Click on any marker
3. No InfoWindow shows up

Code example

function initMap() {
        var latLng = new google.maps.LatLng(49.47805, -123.84716);
        var homeLatLng = new google.maps.LatLng(49.47805, -123.84716);

        var map = new google.maps.Map(document.getElementById("map_canvas"), {
          zoom: 12,
          center: latLng,
          mapTypeId: google.maps.MapTypeId.ROADMAP,
        });

        var marker1 = new markerWithLabel.MarkerWithLabel({
          position: homeLatLng,
          draggable: false,
          clickable: false,
          map: map,
          labelContent: "$425K",
          labelAnchor: new google.maps.Point(-21, 3),
          labelClass: "labels", // the CSS class for the label
          labelStyle: { opacity: 0.75 },
        });

        var marker2 = new markerWithLabel.MarkerWithLabel({
          position: new google.maps.LatLng(49.475, -123.84),
          draggable: true,
          map: map,
          labelContent: "$395K",
          labelAnchor: new google.maps.Point(-21, 3),
          labelClass: "labels", // the CSS class for the label
          labelStyle: { opacity: 1.0 },
        });

        var iw1 = new google.maps.InfoWindow({
          content: "Home For Sale",
        });
        var iw2 = new google.maps.InfoWindow({
          content: "Another Home For Sale",
        });
        google.maps.event.addListener(marker1, "click", function (e) {
          iw1.open(map, this);
        });
        google.maps.event.addListener(marker2, "click", function (e) {
          iw2.open(map, this);
        });
      }

[nzamps]

same here

[nzamps]

Forcing &v=3.49 on the google maps api fixes it

[gigo6000]

@nzamps thanks! that worked 👍🏽 🎉

[vivek-kandhvar]

same here! I wasted so much time debugging this issue 😩
Hope they fix this ASAP

[vivek-kandhvar]

Forcing &v=3.49 on the google maps api fixes it

How and where do we do that?

[nzamps]

depends how you are specifiying the google api. We have a script tag like:

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=xxxxxxxxx&v=3.49"></script>

But note: this is only a temporary solution as 3.49 will be EOL next year:

https://developers.google.com/maps/documentation/javascript/versions

[vivek-kandhvar]

Got it. We use https://www.npmjs.com/package/@googlemaps/react-wrapper, which in turn loads the api for us. Can hard code for now. Hope google fixes this soon.

[gigo6000]

@vivek-kandhvar we use a different react package but it also uses the @googlemaps/js-api-loader to load the Google Maps Api, according to the docs of react-wrapper all options accepted by @googlemaps/js-api-loader are also accepted as props to the wrapper component so you should be able to do something like this:

  <Wrapper apiKey={"YOUR_API_KEY"} render={render} version='3.49'>
    <MyMapComponent />
  </Wrapper>

[guix77]

Precisely, we have until May 2023 to fix this

[nzamps]

This appears to be working again now. I had to add a new param "callback" to get it to work or it errors with:

"Loading the Google Maps JavaScript API without a callback is not supported: https://developers.google.com/maps/documentation/javascript/url-params#required_parameters
js:258"

e.g.
&callback=initMap

		<script>
			function initMap() {
			};
		</script>

Can anyone else verify?

[nzamps]

Actually, not working. The Info windows popup in the wrong location.

[vijay-t13]

Any solution for it till now ???