Google maps markers that connect to page anchor links

Design help General
1

Hi,

I want to insert a map with custom markers and then connect those markers to page anchors. Any tips?

Thanks!

2

Anyone?

Something along the lines of this https://ny.eater.com/maps/best-new-york-restaurants-38-map

Is it possible with webflow?

3

Hey @moonworks,

Sure I think it is possible, with a few line of JavaScript.

The idea is the following:

  1. Define an array of points for your markers
  2. Define an array of URLs for your same markers
  3. Create a for loop function which will populate the marker with the points and urls.
  4. Add an click event listener on your marker
  5. Call the window.location.href within the for loop to trigger the respective url of the marker

Here is a codepen I wrote to try my idea out (you’ll need to customize CSS, transition etc… but conceptually, it works.)

Here is my listed ideas translated into JavaScript:

function initMap() {
  // Options 👇🏻
  const zoom = 12;
  
  // 🦋 define the lattitude and longitude points of each markers
  const POINTS = [
    { lat: 59.9362384705039, lng: 30.19232525792222 },
    { lat: 59.941412822085645, lng: 30.263564729357767 }
  ];

  // 🐳 define the URLs id (which are the id of your HTML anchor points)
  const URLS = ["#url1", "#url2"];

  // definition of the map and its options
  const MAP = new google.maps.Map(document.getElementById("map"), {
    zoom: zoom,
    center: POINTS[0],
  });

  // 🦊 create a for loop function to populate the arrays above into each markers
  for (let i = 0; i < POINTS.length; i++) {
    // creation of the marker
    const MARKER = new google.maps.Marker({
      map: MAP,
      position: POINTS[i], // 🦜 inject lat & lng position from the POINTS array
      url: URLS[i] // 🦚 inject urls from the URLS array
    });

    // 🦠 marker url click event listener
    google.maps.event.addListener(MARKER, "click", function() {
      window.location.href = this.url;
    });
  }
}

Hope that helps !

1 Like
4

This is great. Thanks @anthonysalamin i will give that a go!

5

@moonworks

Wondering if you ever got this to work :slight_smile:

6

@noslenc the project i was working on changed track a bit so i never tried it out! have you tried it?