ラベル付きGoogleマップサークル

Question

google map apiを使用して地図ビューを作成しました。google.mapsを使用してマーカーをサークルに変更しました。円で地図を印刷しても問題はありませんが、ラベルやテキストを追加することはできません。それをどうやって解決できるか。ここで

あなたが円の上にご希望のラベル/テキストとInfoBoxを追加することができ、私は円

function initialize() { 

     var frrlanser_marker = { 
      strokeColor: '#FF0000', 
      strokeOpacity: 0.8, 
      strokeWeight: 2, 
      fillColor: '#FF0000', 
      fillOpacity: 0.35, 
      radius: 60 * 100 
     }; 



     var latlng = new google.maps.LatLng(6.951974, 80.720160); 
     var myOptions = { 
      scrollwheel: false, 
      zoom: 10, 
      center: latlng, 
      mapTypeId: google.maps.MapTypeId.ROADMAP 
     }; 

     var map = new google.maps.Map(document.getElementById("map"), 
      myOptions); 

<?php foreach($results as $val): ?> 
<?php if($val->geo_location != ""): ?> 

     <?php if($val->fontUserTypeId == 1) { ?> 
     var fill_color_val = '#3888ff'; 
     <?php } else { ?> 
     var fill_color_val = '#70d04f'; 
    <?php } ?> 




    <?php $LatLng = explode(",", $val->geo_location); ?> 

    var latitude = <?php echo $LatLng[0]; ?>; 
    var lontitude = <?php echo $LatLng[1]; ?>; 

    var myLatLng = {lat: latitude, lng: lontitude}; 

    var marker = new google.maps.Marker({ 
     position: myLatLng, 
     map: map 
    }); 

     // Add circle overlay and bind to marker 
     var circle = new google.maps.Circle({ 
      map: map, 
      radius: 3200, // 10 miles in metres 
      fillColor: fill_color_val, 
      strokeColor: '#FFFFFF', 
      strokeWeight: 2, 
      fillOpacity: 1, 
     }); 
     circle.bindTo('center', marker, 'position'); 

     marker.setVisible(false); 

} 

    google.maps.event.addDomListener(window, "load", initialize); 

Answer 1

を印刷するのに使用されるコードです。

proof of concept fiddle

コードスニペット：

function initialize() { 
 

 
    var frrlanser_marker = { 
 
    strokeColor: '#FF0000', 
 
    strokeOpacity: 0.8, 
 
    strokeWeight: 2, 
 
    fillColor: '#FF0000', 
 
    fillOpacity: 0.35, 
 
    radius: 60 * 100 
 
    }; 
 

 
    var latlng = new google.maps.LatLng(6.951974, 80.720160); 
 
    var myOptions = { 
 
    scrollwheel: false, 
 
    zoom: 10, 
 
    center: latlng, 
 
    mapTypeId: google.maps.MapTypeId.ROADMAP 
 
    }; 
 

 
    var map = new google.maps.Map(document.getElementById("map"), 
 
    myOptions); 
 
    var fill_color_val = '#3888ff'; 
 

 
    var latitude = 6.951974; 
 
    var lontitude = 80.720160; 
 

 
    var myLatLng = google.maps.LatLng(latitude, lontitude); 
 

 
    var marker = new google.maps.Marker({ 
 
    position: latlng, 
 
    map: map 
 
    }); 
 

 
    // Add circle overlay and bind to marker 
 
    var circle = new google.maps.Circle({ 
 
    map: map, 
 
    radius: 3200, // 10 miles in metres 
 
    fillColor: fill_color_val, 
 
    strokeColor: '#FFFFFF', 
 
    strokeWeight: 2, 
 
    fillOpacity: 1, 
 
    }); 
 
    circle.bindTo('center', marker, 'position'); 
 

 
    marker.setVisible(false); 
 

 
    var labelText = "1"; 
 
    var myOptions = { 
 
    content: labelText, 
 
    boxStyle: { 
 
     border: "none", 
 
     textAlign: "center", 
 
     fontSize: "10pt", 
 
     width: "50px" 
 
    }, 
 
    disableAutoPan: true, 
 
    pixelOffset: new google.maps.Size(-25, -5), 
 
    position: latlng, 
 
    closeBoxURL: "", 
 
    isHidden: false, 
 
    pane: "floatPane", 
 
    enableEventPropagation: true 
 
    }; 
 

 
    var ibLabel = new InfoBox(myOptions); 
 
    ibLabel.open(map); 
 

 
} 
 

 
google.maps.event.addDomListener(window, "load", initialize);

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/infobox/src/infobox.js"></script> 
 
<div id="map"></div>