Gmap3 - Forum

Claimoar

Member

Registered: 2012-05-25

Posts: 3

Hyperlinks to markers

Hello, I know this is not the best first post here, but I would like to ask for help in rather easy task I am, however, unable to complete, for my programming skills are laughable.

Long story short, I have a list of markers stored in external file list.js, like this:

var List = [
{lat:	49.7832785	, lng:	18.5235758	, data:{city:"some city	",name:"name of the location	",address:"	address of said location	"}},
... etc

and I managed to display those markers on the map. That was the easy part. Now I have been asked to include a hyperlink to every single marker on the list. Clicking this hyperlink would center the map on the associated marker and zoom in. The links should be listed in a div next to the map. So, there is the code:

    <script type="text/javascript">
    
      $(function(){
      
        $('#googleMap').gmap3(
          {action: 'init',
            options:{
              center:[49.741039, 15.336027],
              zoom: 7,
			  streetViewControl: false,
              mapTypeId: google.maps.MapTypeId.ROADMAP
            }
          },
          {action: 'addMarkers',
            radius:100,
            markers: List,
			maxZoom:13,
			radius:50,
            clusters:{
              // This style will be used for clusters with more than 0 markers
              0: {
                content: '<div class="cluster cluster-1">CLUSTER_COUNT</div>',
                width: 53,
                height: 52
              },
              // This style will be used for clusters with more than 20 markers
              20: {
                content: '<div class="cluster cluster-2">CLUSTER_COUNT</div>',
                width: 56,
                height: 55
              },
              // This style will be used for clusters with more than 50 markers
              50: {
                content: '<div class="cluster cluster-3">CLUSTER_COUNT</div>',
                width: 66,
                height: 65
              }
            },
            marker: {
              options: {
                icon: new google.maps.MarkerImage('http://maps.gstatic.com/mapfiles/icon_green.png')
              },			  
              events:{  
                mouseover: function(marker, event, data){
                  $(this).gmap3(
                    { action:'clear', name:'overlay'},
                    { action:'addOverlay',
                      latLng: marker.getPosition(),
                      content:  '<div class="barinfo">' +
                                  '<div class="bg"></div>' +
                                  '<div class="text">' + data.name + ', ' + data.address + ', ' + data.city + '</div>' +
                                '</div>' +
                                '<div class="arrow"></div>',
                      offset: {
                        x:-46,
                        y:-73
                      }
                    }
                  );
                },
                mouseout: function(){
                  $(this).gmap3({action:'clear', name:'overlay'});
                }
              }
            }
          }
        );
      });
    </script>

Thank you for your time and help.