javascript - studio - poner varios marcadores en google maps js

¿Cómo mostrar una etiqueta junto a un marcador para Google Maps?

Question

Me gustaría mostrar una etiqueta de texto junto a los marcadores en google maps. He usado Virtual Earth antes y estoy empezando a usar Google Maps. Intenté establecer la propiedad Título, pero eso solo cambia el texto que se desplaza.

¿Hay alguna forma de mostrar una pequeña línea de texto debajo de un marcador que permanecerá allí a medida que el usuario aumente el zoom, haga paneo y use el mapa?

¡Gracias por adelantado!

Answer 1

Aquí hay algunos ejemplos de código que resolverían el problema: https://github.com/printercu/google-maps-utility-library-v3-read-only/tree/master/markerwithlabel/examples

Esta es una clase personalizada llamada InfoBox. Puedes ver la referencia de la API en el enlace de arriba

El archivo js se puede incluir aquí: https://github.com/printercu/google-maps-utility-library-v3-read-only/blob/master/infobox/src/infobox.js

¡Aclamaciones!

Answer 2

Aquí hay una buena clase de etiqueta, aunque tendrás que agregarla junto con los marcadores.

Answer 3

Incluso esta pregunta ha sido respondida. He encontrado este recurso , que creo que es una buena solución para este problema y podría ser útil. También, una solución similar se puede encontrar here .

Answer 4

Para la API de JavaScript de Google Maps v3, consulte los ejemplos aquí .

Código fuente disponible en formas normales y minimizadas .

Answer 5

Si solo desea mostrar la etiqueta debajo del marcador, puede extender el marcador de google maps para agregar un método de establecimiento de etiqueta y puede definir el objeto de la etiqueta extendiendo overlayView de google maps como este.

Demo: jsFiddle

<script type="text/javascript">
    var point = { lat: 22.5667, lng: 88.3667 };
    var markerSize = { x: 22, y: 40 };


    google.maps.Marker.prototype.setLabel = function(label){
        this.label = new MarkerLabel({
          map: this.map,
          marker: this,
          text: label
        });
        this.label.bindTo(''position'', this, ''position'');
    };

    var MarkerLabel = function(options) {
        this.setValues(options);
        this.span = document.createElement(''span'');
        this.span.className = ''map-marker-label'';
    };

    MarkerLabel.prototype = $.extend(new google.maps.OverlayView(), {
        onAdd: function() {
            this.getPanes().overlayImage.appendChild(this.span);
            var self = this;
            this.listeners = [
            google.maps.event.addListener(this, ''position_changed'', function() { self.draw();    })];
        },
        draw: function() {
            var text = String(this.get(''text''));
            var position = this.getProjection().fromLatLngToDivPixel(this.get(''position''));
            this.span.innerHTML = text;
            this.span.style.left = (position.x - (markerSize.x / 2)) - (text.length * 3) + 10 + ''px'';
            this.span.style.top = (position.y - markerSize.y + 40) + ''px'';
        }
    });
    function initialize(){
        var myLatLng = new google.maps.LatLng(point.lat, point.lng);
        var gmap = new google.maps.Map(document.getElementById(''map_canvas''), {
            zoom: 5,
            center: myLatLng,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        });
        var myMarker = new google.maps.Marker({
            map: gmap,
            position: myLatLng,
            label: ''Hello World!'',
            draggable: true
        });
    }
</script>
<style>
    .map-marker-label{
        position: absolute;
    color: blue;
    font-size: 16px;
    font-weight: bold;
    }
</style>

Esto funcionará.

Answer 6

Una alternativa al uso de la biblioteca js es simplemente crear un icono .png que incluya su texto. Suena tonto, pero puedes usar algún servicio externo para esto (como este ).

Subes tu ícono, y obtienes un enlace a cambio. Si agrega texto a la URL de los enlaces, devolverá su ícono con ese texto renderizado.