gps 태그 앨범 제작(5/4)

구글 지도가 지원하는 clusterer를 사용하고 싶다. cpan으로 설치한 HTML:GoogleMap:V3 내부를 손봐야 했다. perl이 사용하는 perl module @INC(경로 비슷한?)를 찾았다.

root@gen8# perl -V
Summary of my perl5 (revision 5 version 30 subversion 1) configuration:
   
  Platform:
    osname=linux
...
  @INC:
    /usr/local/lib/perl5/site_perl/5.30.1/x86_64-linux-gnu
    /usr/local/lib/perl5/site_perl/5.30.1
    /usr/local/lib/perl5/vendor_perl/5.30.1/x86_64-linux-gnu
    /usr/local/lib/perl5/vendor_perl/5.30.1
    /usr/local/lib/perl5/5.30.1/x86_64-linux-gnu
    /usr/local/lib/perl5/5.30.1

usr/local/lib 경로 아래 V3.pm을 찾아 지웠더니 에러를 받았다. 야호! perl을 잘 모르지만 내부를 조금 수정하면 내가 원하는 코드를 만들 수 있다. 여기에서 add marker 부분만 조금 수정했다. template을 사용하여 쉽게 수정했다.

...V3.pm 수정.
...
   my $template =<<"EndOfTemplate";
function html_googlemaps_initialize() {

    [% # Github issue 22 %]
    [% IF center %]
	myCenterLatLng = new google.maps.LatLng({lat: [% center.0 %], lng: [% center.1 %]});
    [% END %]


	//2020.2.16 추가
	var markers = [];

    // key map controls
    var map = new google.maps.Map(document.getElementById('[% id %]'), {
        mapTypeId: google.maps.MapTypeId.[% type %],
        [% IF center %]center: myCenterLatLng,[% END %]
        scrollwheel: false,
        zoom: [% zoom %],
        draggable: [% dragging ? 'true' : 'false' %]
    });

    [% FOREACH point IN points %]

    // marker
    myMarker[% loop.count %]LatLng = new google.maps.LatLng({lat: [% point.point.0 %], lng: [% point.point.1 %]});
    var marker[% loop.count %] = new google.maps.Marker({
        map: map,
        position: myMarker[% loop.count %]LatLng,
    });

    // marker infoWindow
    [% IF info_window AND point.html %]
    var contentString[% loop.count %] = '[% point.html %]';
    var infowindow[% loop.count %] = new google.maps.InfoWindow({
        content: contentString[% loop.count %]
    });

    marker[% loop.count %].addListener('click', function() {
        infowindow[% loop.count %].open(map, marker[% loop.count %]);
    });

	//2020.2.16 추가
	markers.push(marker[% loop.count %]);

    [% END %]

    [% END -%]

    [% FOREACH route IN poly_lines %]

    // polylines
    var route[% loop.count %]Coordinates = [
        [% FOREACH point IN route.points %]{lat: [% point.0 %], lng: [% point.1 %]}[% loop.last ? '' : ',' %]
        [% END %]
    ];

    var route[% loop.count %] = new google.maps.Polyline({
        path: route[% loop.count %]Coordinates,
        geodesic: true,
        strokeColor: '[% route.color %]',
        strokeOpacity: [% route.opacity %],
        strokeWeight: [% route.weight %]
    });

    route[% loop.count %].setMap(map);
    [% END %]
	//20.2.16 추가
	var markerCluster = new MarkerClusterer(map, markers);
}
google.maps.event.addDomListener(window, 'load', html_googlemaps_initialize);

EndOfTemplate
}
...생략
sub onload_render {
    my ( $self ) = @_;

    # Add in all the defaults
    $self->{id}         ||= 'map';
    $self->{height}     ||= '400px';
    $self->{width}      ||= '600px';
    $self->{type}       ||= "NORMAL";
    $self->{zoom}       ||= 13;
    $self->{center}     ||= $self->_find_center;
    $self->{dragging}     = 1 unless defined $self->{dragging};
    $self->{info_window}  = 1 unless defined $self->{info_window};

    $self->{width}  .= 'px' if $self->{width} =~ m/^\d+$/;
    $self->{height} .= 'px' if $self->{height} =~ m/^\d+$/;

	#	    my $header = '<script src="https://maps.googleapis.com/maps/api/js__KEY__"'
	#        . ' async defer type="text/javascript"></script>'
	#    ;
	# 20.2.16 추가
	#  필요에 따라 경로 수정

	    my $header = '<script src="../map/marker/src/markerclusterer.js"></script>
<script src="https://maps.googleapis.com/maps/api/js__KEY__"'
	        . ' async defer type="text/javascript"></script>'
	    ;

    my $key = $self->{api_key}
        ? "?key=@{[ $self->{api_key} ]}" : "";

    $header =~ s/__KEY__/$key/;

    my $map = sprintf(
        '<div id="%s" style="width: %s; height: %s%s"></div>',
        @{$self}{qw/ id width height / },
        exists($self->{'z_index'})
            ? '; z-index: ' . $self->{'z_index'} : ''
    );

    my $out;
    Template->new->process( \$self->_js_template,$self,\$out );

    $header .= "<script>$out</script>";

    return ( $header,$map );
}
...생략

대충 원하는대로 나온다.