Home/ Questions/Q 7929079
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-03T19:57:18+00:00

Can you somehow reference other markers inside a marker? Link markers together, even though

  • 0

Can you somehow reference other markers inside a marker? Link markers together, even though they have different locations on a map.

Let’s say I have two types of markers for each person:
1st marker is the location of where the person lives, 2nd marker is the location of where the person works.

Say there are many of these markers on my map. You hover over one. The one you’ve hovered over and the second marker that is linked to that marker(associated with the same person) is highlighted.

How would you do that, theoretically?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    I have an example, the idea is to keep an object (hash) or array of the various people, and when creating markers, assign who it belongs to (marker.owner). Later when it is selected, retrieve whose marker it is, and change the others from this information. The code below can be shortened, but the way it is left spread open you can see step-by-step what’s going on.

    http://jsfiddle.net/afTLh/

    <!DOCTYPE html>
<html>
  <head>
    <style type="text/css">
      html, body, #map_canvas { margin: 0; padding: 0; height: 100% }
    </style>
    <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
    <script type="text/javascript">
      var map;
      var mapOptions = { center: new google.maps.LatLng(40.0, -90.0), zoom: 5,
        mapTypeId: google.maps.MapTypeId.ROADMAP };

      var people = {};

      function initialize() {
        map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
        addPerson("Joe",40,-88,41,-86);
        addPerson("Tina",42,-92,43,-93);
        addPerson("Ken",39,-94,39.5,-96);
      }

      function addPerson(name, homelat, homelng, worklat, worklng) {
        people[name] = {};

        homemarker = new google.maps.Marker({
          map: map,
          position: new google.maps.LatLng(homelat, homelng),
          icon: 'http://labs.google.com/ridefinder/images/mm_20_green.png'
        });

        workmarker = new google.maps.Marker({
          map: map,
          position: new google.maps.LatLng(worklat, worklng),
          icon: 'http://labs.google.com/ridefinder/images/mm_20_blue.png'
        });

        homemarker.owner = name;
        workmarker.owner = name;

        google.maps.event.addListener(homemarker, 'mouseover', function() {
          var name = this.owner;
          this.setIcon("http://labs.google.com/ridefinder/images/mm_20_red.png");
          people[name].work.setIcon("http://labs.google.com/ridefinder/images/mm_20_red.png");
        });

        google.maps.event.addListener(homemarker, 'mouseout', function() {
          var name = this.owner;
          this.setIcon("http://labs.google.com/ridefinder/images/mm_20_green.png");
          people[name].work.setIcon("http://labs.google.com/ridefinder/images/mm_20_blue.png");
        });


        google.maps.event.addListener(workmarker, 'mouseover', function() {
          var name = this.owner;
          this.setIcon("http://labs.google.com/ridefinder/images/mm_20_red.png");
          people[name].home.setIcon("http://labs.google.com/ridefinder/images/mm_20_red.png");
        });

        google.maps.event.addListener(workmarker, 'mouseout', function() {
          var name = this.owner;
          this.setIcon("http://labs.google.com/ridefinder/images/mm_20_blue.png");
          people[name].home.setIcon("http://labs.google.com/ridefinder/images/mm_20_green.png");
        });

        people[name].home = homemarker;
        people[name].work = workmarker;
      }
      google.maps.event.addDomListener(window, 'load', initialize);
    </script>
  </head>
  <body>
    <div id="map_canvas"></div>
  </body>
</html>
    • 0