0

I have a component with a section tag with an id and ref of map. The id is used to load a Google Map, don't worry about this.

<section
    id="map"
    ref="map"
>
</section>

I have a function called showUserLocationOnTheMap() with a button called Map that's invoked when a User clicks on it. This function shows a marker on the map based on an address, that is stored in the db from a previous step.

showUserLocationOnTheMap(latitude, longitude) {
    let map = new google.maps.Map(document.getElementById("map"), {
        zoom:15,
        center: new google.maps.LatLng(latitude, longitude),
        mapTypeId:google.maps.MapTypeId.ROADMAP
    });

    const marker = new google.maps.Marker({
        position: new google.maps.LatLng(latitude, longitude),
        map: map
    });

    google.maps.event.addListener(marker, "click", () => {

        const infoWindow = new google.maps.InfoWindow();

        infoWindow.setContent(
            `<div class="ui header">
                <h6>company name</h6>
             </div>
              `
        );
        infoWindow.open(map, marker);

    });

    this.$refs.map.scrollToTop();

},

<button
    @click="showUserLocationOnTheMap(item.profile.latitude,item.profile.longitude)"
    class="apply-job-btn btn btn-radius btn-primary apply-it"
>
    Map
</button>

What I'm trying to do is, I have a bunch of search results, so when someone is scrolling far down the page and they click the map button from the record, it will do two things.

  1. It shows a marker on the map (This is working)
  2. It scrolls back up to the top of the page so the User can see the Map with the marker on it.

WHAT I TRIED: I created this function below:

scrollToTop() {
    this.$el.scrollTop = 0;
}

I added a ref attribute called map to my Section tag and then at the end of my showUserLocationOnTheMap() function I called this line (as you can also see above). this.$refs.map.scrollToTop();

The problem is I'm getting this error: Cannot read property 'scrollToTop' of undefined"

Ryan Sacks
  • 498
  • 1
  • 8
  • 38
  • To scroll to the top of the page, you can use `document.body.scrollIntoView()`. Not sure if it fits wat you want. – Seblor Jul 30 '20 at 22:45
  • please provide the structure if your components – Boussadjra Brahim Jul 30 '20 at 23:04
  • Does this answer your question? [Scroll to the top of the page using JavaScript?](https://stackoverflow.com/questions/1144805/scroll-to-the-top-of-the-page-using-javascript) – Keith Nicholas Jul 30 '20 at 23:08
  • #Keith Nicholas This isn't working: scrollToTop() { window.scrollTo(0, 0); } – Ryan Sacks Jul 30 '20 at 23:30
  • #Seblor This isn't working and returning no errors: scrollToTop() { document.body.scrollIntoView(); } – Ryan Sacks Jul 30 '20 at 23:32
  • You can try this.. const router = new Router({ ..... scrollBehavior() { document.getElementById('app').scrollIntoView(); } }) together with what you have – Tony Jul 31 '20 at 04:55
  • I'm getting this error, even though I'm importing my router file. Unresolved type Router I put your code in my SearchComponent.vue is that the right place? – Ryan Sacks Jul 31 '20 at 13:58

0 Answers0