Messaging Html Component

Ask the community
,
1

Please, I’m trying to message coordinates to a google map in a component, but I can’t make it work. The console doesn’t show any errors, and the map refreshes whenever I click the container, therefore I think the message is being passed and the html component receives the data but after that it doesn’t place the marker. I’ve been trying to make it work for days, and at this point maybe I’m not seeing something, or simply my code is wrong, so it would be great if you could help me on this. Here’s my page code:

export function container2_click(event, $w) {
 let place_id = $w("#textmaprepeater2").text;
 set_details(place_id);
 $w("#repeater1").collapse()
 .then (() => {
   let locationlat = $w("#textmaprepeater3").text
   let locationlng = $w("#textmaprepeater4").text
   let uluru = [];
        uluru.push({
             "lat": locationlat,
             "long": locationlng,
            });
            $w("#htmlGoogleMap").postMessage(uluru)
 })
    .catch( (err) => {
      let errorMsg = err;
      console.log(errorMsg);
    } );
}

And my html code:

<html>
  <head>
    <style>
      /* Set the size of the div element that contains the map */
       #map {
        height: 100%;
      }
      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
       }
    </style>
  </head>
  <body>
    <div id="map"></div>
    <script>
      window.onmessage = (event) => {
         if (event.data) {
         let receivedData = event.data;
              initMap(receivedData);
       }
};
// Initialize and add the map
function initMap(receivedData) {
  var uluru = receivedData;
  var map = new google.maps.Map(
      document.getElementById('map'), {zoom: 4, center: new google.maps.LatLng(35.223603, -80.836319), mapTypeId: 'roadmap'});

  var marker = new google.maps.Marker({position: new google.maps.LatLng(uluru.lat, uluru.long), map: map, draggable: true, animation: google.maps.Animation.DROP,});
}
    </script>
    <script async defer
    src="https://maps.googleapis.com/maps/api/js?key=MYKEYISHERE&callback=initMap">
    </script>
  </body>
</html>

In case you’re wondering, the coordinates are retrieved from a couple of text elements as you can see, I know the data is there when the postmessage event takes place because I can see them displayed and also they are succesfully saved on my database. Any help is really appreciated!

2

See the Example: Multiple Markers Google Maps .

3

im trying a simple console log on the html component side but nothing seems to happen.

<script type="text/javascript">
   window.onmessage = (event) => {
     if (event.data) {
       console.log(`HTML Component received a message: ${event.data}`);
       // additional code here
     }
   }
 </script>
4

You will only see console.log() output from the HtmlComponent in the browser’s console.

5

Maybe @yisrael-wix ´s message is too cryptic. What he means is: the html-component does not run inside Wix, so console.log in Wix will not show anything. You will have to use another console, the browser´s. Press CTRL-I (and select Console in the Tab) or CTRL-J (both Win only). Now you will see what´s going on.