#Google mas laggy update
#Google mas laggy code

Bonus: Access Individual Markers With the Same Coordinates Note: For the best user experience, allow the user to pick the mile radius they'd like to restrict their results to and pass that into the request along with their location. Doing so will significantly reduce the amount of data added to the map on the first render.

#Google mas laggy update

Since we'll already have access to all of the markers we defined and saved to state, we can update our call that adds the markers to our clusterer object to only include those whose current position is within the map's current bounds. Our map object gives us access to a getBounds method on the current instance that allows us to determine the visible portion of the map based on its position and zoom level. This tip might seem obvious, but it can be easy to forget and just as easily kill performance. Only Plot Markers for Data Within the Current Bounds If you decide to use custom icons to represent clusters on the map, the same tips outlined for custom marker images will apply. You can read more about configuring when and how your clusters render in the Maps JavaScript API documentation. Not only is it a great way to help your map's performance, but it makes the visual representation of a larger dataset less challenging to parse. This particular optimization is a must for maps that display a large number of markers. To do so, we'll add an icon property to the marker object we defined in our plotMarkers method:

#Google mas laggy code

Let's update our code to specify a custom image for our markers. Taking advantage of this optimization would be beneficial for us since we're displaying thousands of homes at once.

The Google Maps library provides built-in optimizations for rendering raster image markers, which will minimize any map tile rendering lag as a user pans and zooms on the map. png) instead of Scalable Vector Graphics (. Whenever you're using custom images for your markers, it's recommended to stick to raster images (. This first tip comes straight from the Google Maps Platform list of best practices. Use Raster Images for Custom Marker Icons In the plotMarkers method, we map over those homes, create a map marker for each, and add them to our map component. We'll be primarily focused on updating the code within our plotMarkers method.Īs it stands, our test data is currently returning 2,000 records that we pass into our component through its homes prop.

Don't worry too much about the particulars of this component. It also provides access to the google object and Map instance – both of which will be very important later. Quick Note: I am using the vue2-google-maps library here which provides a great, ready to use Google Maps component.