Google Maps api - метка для маркеров

Question

Я хочу добавить карту cusom на свой сайт, для основной части все работает, за исключением одной вещи.

Красный маркер нуждается в ярлыке, хотя я мог бы добавить значок и использовать его как маркер, но я бы хотел добавить ярлык без дополнительного изображения.

Также я не хочу использовать дополнительные плагины.

Если это не поможет: возможно ли добавить mapoptions в стандартную карту вставки? Единственный недостаток заключается в том, что он масштабируется при прокрутке.

---

Посмотрите на текущей карте:

---

Этикетка Маркер должен иметь:

Brandenburger Gate - Google Maps

---

HTML:

<div id="googleMap"></div> 
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> 

Javascript (Jquery):

$(function() { 

    function showMap() { 

     var mapZoom = 14; 
     var LatLng = new google.maps.LatLng(52.516275, 13.377704); 

     var mapOptions = { 
      zoom: mapZoom, 
      center: LatLng, 
      streetViewControl: false, 
      scrollwheel: false, 
      navigationControl: false, 
      mapTypeControl: false, 
      scaleControl: false, 
      keyboardShortcuts: false 

     }; 

     var map = new google.maps.Map(document.getElementById('googleMap'),mapOptions); 

     var marker = new google.maps.Marker({ 
      position: LatLng, 
      map: map, 
      draggable: false 
     }); 
    } 
    google.maps.event.addDomListener(window, 'load', showMap); 

}); 

Answer 1

Попробуйте этот код:

<style type="text/css"> 
    .labels { 
    color: white; 
    background-color: red; 
    font-family: "Lucida Grande", "Arial", sans-serif; 
    font-size: 10px; 
    text-align: center; 
    width: 10px;  
    white-space: nowrap; 
    } 
</style> 

var latLng = new google.maps.LatLng(49.47805, -123.84716); 
var homeLatLng = new google.maps.LatLng(49.47805, -123.84716); 

var map = new google.maps.Map(document.getElementById('map_canvas'), { 
    zoom: 12, 
    center: latLng, 
    mapTypeId: google.maps.MapTypeId.ROADMAP 
}); 

var marker = new MarkerWithLabel({ 
    position: homeLatLng, 
    map: map, 
    labelContent: "BrandenBurger Tor", 
    labelAnchor: new google.maps.Point(22, 0), 
    labelClass: "labels" // the CSS class for the label 
}); 

Для добавления более настраиваемых функций маркерам см это link.

Надеюсь, что это поможет!

Answer 2

Способ создания пользовательского маркера состоит в том, чтобы нарисовать желаемое изображение путем рисования на холсте, а затем использовать функцию SetIcon с DataURL из холста в качестве параметра.

// A way to create a GoogleMap marker with text 

enter code here 

var marker = new google.maps.Marker({position: new google.maps.LatLng(35.1,32), title: "My Custom Marker" }); 

var cnv=document.createElement("canvas"); 
var cntx = cnv.getContext("2d"); 
cnv.width=50; 
cnv.height=50; 
cntx.fillText("Hello World!",10,10); 

marker.setIcon(cnv.toDataURL('image/jpeg')); ' 

Answer 3

вы можете использовать label of google marker так:

new google.maps.Marker({ 
       position:latlng, 
       map:map, 
       label: 'A' 
      }); 

Answer 4

Одним из вариантов было бы использовать InfoBox сторонней библиотеки и связать позицию Infobox к маркеру.

var labelText = "Brandenburger Tor"; 

var myOptions = { 
    content: labelText, 
    boxStyle: { 
    border: "none", 
    textAlign: "center", 
    fontSize: "12pt", 
    fontWeight: "bold", 
    width: "150px", 
    color: "#C70E20" 

    }, 
    disableAutoPan: true, 
    pixelOffset: new google.maps.Size(10, -10), 
    position: LatLng, 
    closeBoxURL: "", 
    isHidden: false, 
    pane: "mapPane", 
    enableEventPropagation: true 
}; 

var ibLabel = new InfoBox(myOptions); 
ibLabel.open(map); 
var marker = new google.maps.Marker({ 
    position: LatLng, 
    map: map, 
    draggable: false 
}); 
marker.bindTo('map', ibLabel); 
marker.bindTo('position', ibLabel); 

proof of concept fiddle

фрагмент кода:

$(function() { 
 

 
    function showMap() { 
 

 
    var mapZoom = 14; 
 
    var LatLng = new google.maps.LatLng(52.516275, 13.377704); 
 

 
    var mapOptions = { 
 
     zoom: mapZoom, 
 
     center: LatLng, 
 
     streetViewControl: false, 
 
     scrollwheel: false, 
 
     navigationControl: false, 
 
     mapTypeControl: false, 
 
     scaleControl: false, 
 
     keyboardShortcuts: false 
 
    }; 
 

 
    var map = new google.maps.Map(document.getElementById('googleMap'), mapOptions); 
 

 
    var labelText = "Brandenburger Tor"; 
 

 
    var myOptions = { 
 
     content: labelText, 
 
     boxStyle: { 
 
     border: "none", 
 
     textAlign: "center", 
 
     fontSize: "12pt", 
 
     fontWeight: "bold", 
 
     width: "150px", 
 
     color: "#C70E20" 
 
     }, 
 
     disableAutoPan: true, 
 
     pixelOffset: new google.maps.Size(10, -10), 
 
     position: LatLng, 
 
     closeBoxURL: "", 
 
     isHidden: false, 
 
     pane: "mapPane", 
 
     enableEventPropagation: true 
 
    }; 
 

 
    var ibLabel = new InfoBox(myOptions); 
 
    ibLabel.open(map); 
 
    var marker = new google.maps.Marker({ 
 
     position: LatLng, 
 
     map: map, 
 
     draggable: false 
 
    }); 
 
    marker.bindTo('map', ibLabel); 
 
    marker.bindTo('position', ibLabel); 
 
    } 
 
    google.maps.event.addDomListener(window, 'load', showMap); 
 
});

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<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="googleMap"></div>