Is there a way to automatically zoom in when clicking on a marker and centering the map to that

Question

Is there a way to automatically zoom in when clicking on a marker and centering the map to that

I have integrated a map into my project where I am currently plotting random coordinates. These coordinates are stored in a data table and everything is functioning smoothly.

However, I am facing an issue with implementing a zoom feature using the panTo method. I want the map to gradually zoom in on a marker when it is clicked, but I am struggling to get it to work properly.

Any suggestions or solutions on how to achieve this would be greatly appreciated. Thank you in advance.

Here is a snippet from my GPSLib Class:

public static class GPSLib
{
    // Code snippet for PlotGPSPoints method
}

Additionally, here is the onLoad() method from the aspx page that creates the data table with the coordinates:

protected void Page_Load(object sender, EventArgs e)
{
    // Code snippet for creating and populating the data table
}

javascript asp.net google-maps google-maps-markers

Answer 1

Answer №1

Instead of directly using map.panTo() after creating the marker, you should utilize the click event of the marker to perform the action within it.

After finishing your foreach loop, add the following code:

function myMark(rmarker)
{
    google.maps.event.addListener(rmarker,'click',function(){
      map.panTo(rmarker.getPosition());
    });
}

Invoke the above function at the conclusion of your foreach loop like this:

var marker" + i.ToString() + @" = new google.maps.Marker({
                    position: new google.maps.LatLng(" + Latitude + ", " + Longitude + @"),
                    title: '#' + path.getLength(),
                    map: map
                });";
                i++;
 myMark(marker" + i.ToString() + @"); 
}

This will help you resolve your problem.

UPDATE: Check out this functional demo to see the solution in action:

LIVE DEMO

Study the code pattern and you should be able to rectify your errors.

Answer 2

Instead of directly using map.panTo() after creating the marker, you should utilize the click event of the marker to perform the action within it.

After finishing your foreach loop, add the following code:

function myMark(rmarker)
{
    google.maps.event.addListener(rmarker,'click',function(){
      map.panTo(rmarker.getPosition());
    });
}

Invoke the above function at the conclusion of your foreach loop like this:

var marker" + i.ToString() + @" = new google.maps.Marker({
                    position: new google.maps.LatLng(" + Latitude + ", " + Longitude + @"),
                    title: '#' + path.getLength(),
                    map: map
                });";
                i++;
 myMark(marker" + i.ToString() + @"); 
}

This will help you resolve your problem.

UPDATE: Check out this functional demo to see the solution in action:

LIVE DEMO

Study the code pattern and you should be able to rectify your errors.

Is there a way to automatically zoom in when clicking on a marker and centering the map to that

Answer №1

Similar questions

Using AngularJS, you can easily merge one array of data into another array

Tips for disabling scrolling on a <div> using another <div> as a lock

JavaScript Drag Events in Microsoft Edge (Including IE)

Having trouble with changing text in a link with an onclick event?

Grab the webpage's URL by collecting the link from the src attribute of the script tag using XSLT

Ways to retrieve object in Javascript

An issue occurred: TypeError - Unable to access the 'subscribe' property of an undefined object during a POST HTTP request in Angular [8]

Acquire information from a Card using Oracle Apex

Encountering the error "TypeError: Router.use() is expecting a middleware function but received undefined" when attempting to import a router from another file

Leveraging HTML5's local storage functionality to save and manage a collection of list elements within `<ul>`

Encountering null values in IE8/IE7 JavaScript code

React - Implementing toggling of a field within a Component Slot

Is there a way to disable text selection in AngularJS when double-clicking using ng-dblclick?

What is the best way to showcase an image using Next.js?

Can we address certain data before the $stateChangeStart event is triggered?

Tips for fixing the async/await problem in JavaScript

Accessing Next and Previous Elements Dynamically in TypeScript from a Dictionary or Array

evaluation is not being executed in javascript

Error: The value being evaluated in document.getElementById(x).style is not an object and is not supported

Mastering jQuery ajax in Google Chrome Extensions