Google지도에서 마커 레이블 지정

Question

다른 StackOverflow post의 도움으로 마커를 클릭 가능한 링크로 만드는지도가 있습니다.

사용자가 링크 할 위치를 알 수 있도록 마커에 종류가 있어야합니다 (지금은 빈 핀 일뿐입니다).하지만이 코드를 수정하여 빌드하는 방법을 모르겠습니다. 에서 그 함수.

function initMap() { 

var map = new google.maps.Map(document.getElementById('map'), { 
     zoom: 7, 
     center: {lat: 53.618939, lng: -2.1602328} 
    }); 

var locations = [ 
["http://www.google.com", {lat: 53.618939, lng: -2.1601132}], 
["http://www.google.com", {lat: 53.61953, lng: -2.1623746}], 
["http://www.google.com", {lat: 53.6178993, lng: -2.1601596}], 
["http://www.google.com", {lat: 53.5369545, lng: -1.9941523}], 
["http://www.google.com", {lat: 53.5380496, lng: -1.9974085}],]; 

var markers = locations.map(function(location) { 
    var marker = new google.maps.Marker({ 
     map: map, 
     position: location[1], 
     url: location[0] //Will be different for each marker 
    }); 

    google.maps.event.addListener(marker, 'click', function(){ 
     window.location.href = this.url; 
    }); 
    return marker; 
}); 

// Add a marker clusterer to manage the markers. 
var markerCluster = new MarkerClusterer(map, markers, {imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'}); 
} 

Answer 1

는 (적어도 최대 26 마커)의 고유 문자로 각 마커 레이블을하려면, 당신이 따를 수 this example in the documentation

var labels = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ'; 
var labelIndex = 0; 

var markers = locations.map(function(location) { 
    var marker = new google.maps.Marker({ 
    map: map, 
    position: location[1], 
    label: labels[labelIndex++ % labels.length], 
    url: location[0] //Will be different for each marker 
    }); 

    google.maps.event.addListener(marker, 'click', function() { 
    window.location.href = this.url; 
    }); 
    return marker; 
}); 

proof of concept fiddle

코드 :

// In the following example, markers appear when the user clicks on the map. 
 
// Each marker is labeled with a single alphabetical character. 
 
var labels = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ'; 
 
var labelIndex = 0; 
 

 
function initMap() { 
 

 
    var map = new google.maps.Map(document.getElementById('map'), { 
 
    zoom: 7, 
 
    center: { 
 
     lat: 53.618939, 
 
     lng: -2.1602328 
 
    } 
 
    }); 
 

 
    var locations = [ 
 
    ["http://www.google.com", {lat: 53.618939,lng: -2.1601132}], 
 
    ["http://www.google.com", {lat: 53.61953,lng: -2.1623746}], 
 
    ["http://www.google.com", {lat: 53.6178993,lng: -2.1601596}], 
 
    ["http://www.google.com", {lat: 53.5369545,lng: -1.9941523}], 
 
    ["http://www.google.com", {lat: 53.5380496,lng: -1.9974085}], 
 
    ]; 
 

 

 
    var markers = locations.map(function(location) { 
 
    var marker = new google.maps.Marker({ 
 
     map: map, 
 
     position: location[1], 
 
     label: labels[labelIndex++ % labels.length], 
 
     url: location[0] //Will be different for each marker 
 
    }); 
 

 
    google.maps.event.addListener(marker, 'click', function() { 
 
     window.location.href = this.url; 
 
    }); 
 
    return marker; 
 
    }); 
 

 
    // Add a marker clusterer to manage the markers. 
 
    var markerCluster = new MarkerClusterer(map, markers, { 
 
    imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m' 
 
    }); 
 
} 
 
google.maps.event.addDomListener(window, "load", initMap);

html, 
 
body, 
 
#map { 
 
    height: 100%; 
 
    width: 100%; 
 
    margin: 0px; 
 
    padding: 0px 
 
}

<script src="https://maps.googleapis.com/maps/api/js"></script> 
 
<script src="https://cdn.rawgit.com/googlemaps/v3-utility-library/master/markerclustererplus/src/markerclusterer.js"></script> 
 
<div id="map"></div>