Gmap3 - Forum

Claimoar

Member

Registered: 2012-05-25

Posts: 3

Panning to markers - problems

Hello, I've tried to implement the function pan to marker to my map using the code from the example on the site, however my map won't load at all. So here's my current code that loads markers from external file:

   <script type="text/javascript">
    
      $(function(){
      
       $('#test').gmap3(
{ action: 'init',
center:[44.797916,-93.278046],
onces: {
bounds_changed: function(){
$(this).gmap3({
action:'getBounds',
callback: function (bounds){
if (!bounds) return;
var southWest = bounds.getSouthWest();
var northEast = bounds.getNorthEast();
var lngSpan = northEast.lng() - southWest.lng();
var latSpan = northEast.lat() - southWest.lat();
for (var i = 0; i < 10; i++) {
addPantoMarker($(this), i, southWest.lat() + latSpan * Math.random(), southWest.lng() + lngSpan * Math.random());
}
}
});
}
}
},
{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'});
                }
              }
            }
          }
);
 
function addPantoMarker($this, i, lat, lng){
$this.gmap3({
action : 'addMarker',
lat: lat,
lng: lng,
callback: function(marker){
var $button = $('<span>'+i+'</span>');
$button
.click(function(){
$this.gmap3({
action:'panTo',
args:[marker.position]
});
});
$('#panTo').append($button);
}
});
}
      });
    </script>  

here's the structure of the list:

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

I also would like to replace the number in the span by address and city corresponding to every marker. Thanks for help.

EDIT: I managed to run the example (a problem in syntax), but the panning does not work. It does not return any clickable areas. Also no infobox appear for the markers.

Last edited by Claimoar (2012-05-27 11:08:53)