Google Maps - Maker Locations or MaxZoom (Can't access source code anymore)

Is the map on a website that you control?

Hey there,

There's too little info to go on to give you a specific answer. The function you show in your screenshot is responsible for adding the markers to the map, but somwhere else in the JS code, that function would be called and the actually marker data would be passed in as an array of objects:

let markers = [
    { latitiude : 1234, longtude: 43211 },
    { latitiude : 1234, longtude: 43211 },
    { latitiude : 1234, longtude: 43211 },
]

addMarkers(markers)

Select allOpen in new window

You'll need to dig through your JS to find that call

No, I have no control over the website, only normal access via my browser.

Because JS is client-side (i.e runs in the browser), you should have accesss to it all from within the browser. Now it may be that it's minified, so it might be tricky. It may also be that the data is being loaded in it's own call, so you might get some additional info from the Network tab of the console (it may be an Ajax / XHR request).

It might help if you can provide a link to the website

Thank you and sorry for the lack of info, I really have no idea where to start
So far all I've done is right clicked on the map and click inspect. I'm guessing the information I need is back there somewhere but I have no idea where to search.

Alternatively, If there's a way to modify the max zoom setting, that would be of great help too

I need to get marker information off a website but don't have access to the source code, 

Maps code runs in the browser so all the source code is there.

the location (lat / lng) of each marker is stored OR just how to modify the max zoom which is currently set to 12

This will either be in the code or it will be downloaded through an AJAX call - either way the data will be visible in the browser.
I don't understand what you are asking about the zoom? Where do you want to modify the zoom value?

You can try this in the console

map.setZoom({maxZoom: 10});

Select allOpen in new window

If map is global you should be able to interact with it.

Other than that it is not really clear what you are asking.

UPDATE: fixed setOptions => setZoom

Chris, providing you a link to the website is pretty useless because you need to logon to get to where the information is, but I can do a screen share off my computer which will get you to the right place?

Update - fixed above post to use setZoom.

Step 1 - open the console and load the page - monitor the network for any requests that might be requesting the data from the server. Inspect each GET / POST to see if the response contains the data you want.

Step 2 - if none of the requests have the data then it is in the source somewhere. Put a break point on the map.setOptions line highlighted in your code. Load the page and then step out of the function to see where it is called from - that should tell you were the properties is loaded. From there you can trace it backwards to where the source of the marker data is.

Can't access the code from a screenshot, so that's not going to help.

Follow Julians advice - it's gonna take some digging :)

Dankie Julian, the issue is that the map doesn't allow me to zoom in far enough to see the street address of each marker which is what I'm ultimately after. This image shows the maximum I can zoom in on each marker. I was hoping there's a was to modify the zoom parameter, reload the page and get closer to the marker
 

Did you try the following in the console.

map.setZoom(15); // Or higher

Select allOpen in new window

If map is global to the page it is accessible in the console which means you have complete control over the map.

Setting the zoom like Julian mentioned above will change for just the current session until you refresh the screen.

However, what you are asking about is getting the actual data from a password-protected site. The first thing to do is check that the data is licensed or copyrighted which allows you to access it outside of the web app. Most of the time this type of data is licensed to only be viewed on the site and not scraped.

Otherwise, Chris pointed out how to check for the ajax request or looking at the js data. 

FYI, I haven't done programming for over 12 years, so I'm very much out of my comfort zone here. I'm just trying to help someone retrieve their data

To help find the data, review the google example https://developers.google.com/maps/documentation/javascript/examples/icon-complex

You can see on line 48 is where the looping starts to place all the marker. It is using the variable beaches. beaches is defined on line 14 with data hard coded on the page. You can create maps in multiple ways but this is what you want to look for in your code that will be near the lines you showed in your first screenshot. If the data is not hard coded on the page, it could be in a separate file or streamed from a database. In that case, you it is most likely going to be an ajax request. When you hit f12 to create your screen shots, click on the network tab and look for the xhr column.Click on those files (you may need to refresh) and that will help you view the source data. 

// [START maps_icon_complex]
// The following example creates complex markers to indicate beaches near
// Sydney, NSW, Australia. Note that the anchor is set to (0,32) to correspond
// to the base of the flagpole.
function initMap() {
  const map = new google.maps.Map(document.getElementById("map"), {
    zoom: 10,
    center: { lat: -33.9, lng: 151.2 },
  });
  setMarkers(map);
}
// Data for the markers consisting of a name, a LatLng and a zIndex for the
// order in which these markers should display on top of each other.
const beaches = [
  ["Bondi Beach", -33.890542, 151.274856, 4],
  ["Coogee Beach", -33.923036, 151.259052, 5],
  ["Cronulla Beach", -34.028249, 151.157507, 3],
  ["Manly Beach", -33.80010128657071, 151.28747820854187, 2],
  ["Maroubra Beach", -33.950198, 151.259302, 1],
];


function setMarkers(map) {
  // Adds markers to the map.
  // Marker sizes are expressed as a Size of X,Y where the origin of the image
  // (0,0) is located in the top left of the image.
  // Origins, anchor positions and coordinates of the marker increase in the X
  // direction to the right and in the Y direction down.
  const image = {
    url:
      "https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png",
    // This marker is 20 pixels wide by 32 pixels high.
    size: new google.maps.Size(20, 32),
    // The origin for this image is (0, 0).
    origin: new google.maps.Point(0, 0),
    // The anchor for this image is the base of the flagpole at (0, 32).
    anchor: new google.maps.Point(0, 32),
  };
  // Shapes define the clickable region of the icon. The type defines an HTML
  // <area> element 'poly' which traces out a polygon as a series of X,Y points.
  // The final coordinate closes the poly by connecting to the first coordinate.
  const shape = {
    coords: [1, 1, 1, 20, 18, 20, 18, 1],
    type: "poly",
  };


  for (let i = 0; i < beaches.length; i++) {
    const beach = beaches[i];
    new google.maps.Marker({
      position: { lat: beach[1], lng: beach[2] },
      map,
      icon: image,
      shape: shape,
      title: beach[0],
      zIndex: beach[3],
    });
  }
}
// [END maps_icon_complex]

Select allOpen in new window