Is it possible to write custom text on Google Maps API v3?

前端未结

关注

 6  489

Is it possible to write a custom text on Google Maps API v3 next to the marker, or I can use only the info window to do that?

相关标签:

6条回答

悲哀的现实

2020-11-30 01:30

It the text is static, you can use a marker and an image :

var label = new google.maps.Marker({
    position: new google.maps.LatLng(50,50),
    map: map,
    icon: "/images/mytextasanimage.png"
});

0 讨论(0)

没有蜡笔的小新

2020-11-30 01:31

To show custom text you need to create a custom overlay. Below is an example adapted from official Google documentation. You could also use this library for more "stylish" info windows

<html>

<head>
  <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false">
  </script>
  <script>
    //adapded from this example http://code.google.com/apis/maps/documentation/javascript/overlays.html#CustomOverlays
     //text overlays
    function TxtOverlay(pos, txt, cls, map) {

      // Now initialize all properties.
      this.pos = pos;
      this.txt_ = txt;
      this.cls_ = cls;
      this.map_ = map;

      // We define a property to hold the image's
      // div. We'll actually create this div
      // upon receipt of the add() method so we'll
      // leave it null for now.
      this.div_ = null;

      // Explicitly call setMap() on this overlay
      this.setMap(map);
    }

    TxtOverlay.prototype = new google.maps.OverlayView();



    TxtOverlay.prototype.onAdd = function() {

      // Note: an overlay's receipt of onAdd() indicates that
      // the map's panes are now available for attaching
      // the overlay to the map via the DOM.

      // Create the DIV and set some basic attributes.
      var div = document.createElement('DIV');
      div.className = this.cls_;

      div.innerHTML = this.txt_;

      // Set the overlay's div_ property to this DIV
      this.div_ = div;
      var overlayProjection = this.getProjection();
      var position = overlayProjection.fromLatLngToDivPixel(this.pos);
      div.style.left = position.x + 'px';
      div.style.top = position.y + 'px';
      // We add an overlay to a map via one of the map's panes.

      var panes = this.getPanes();
      panes.floatPane.appendChild(div);
    }
    TxtOverlay.prototype.draw = function() {


        var overlayProjection = this.getProjection();

        // Retrieve the southwest and northeast coordinates of this overlay
        // in latlngs and convert them to pixels coordinates.
        // We'll use these coordinates to resize the DIV.
        var position = overlayProjection.fromLatLngToDivPixel(this.pos);


        var div = this.div_;
        div.style.left = position.x + 'px';
        div.style.top = position.y + 'px';



      }
      //Optional: helper methods for removing and toggling the text overlay.  
    TxtOverlay.prototype.onRemove = function() {
      this.div_.parentNode.removeChild(this.div_);
      this.div_ = null;
    }
    TxtOverlay.prototype.hide = function() {
      if (this.div_) {
        this.div_.style.visibility = "hidden";
      }
    }

    TxtOverlay.prototype.show = function() {
      if (this.div_) {
        this.div_.style.visibility = "visible";
      }
    }

    TxtOverlay.prototype.toggle = function() {
      if (this.div_) {
        if (this.div_.style.visibility == "hidden") {
          this.show();
        } else {
          this.hide();
        }
      }
    }

    TxtOverlay.prototype.toggleDOM = function() {
      if (this.getMap()) {
        this.setMap(null);
      } else {
        this.setMap(this.map_);
      }
    }




    var map;

    function init() {
      var latlng = new google.maps.LatLng(37.9069, -122.0792);
      var myOptions = {
        zoom: 4,
        center: latlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
      };
      map = new google.maps.Map(document.getElementById("map"), myOptions);

      var marker = new google.maps.Marker({
        position: latlng,
        map: map,
        title: "Hello World!"
      });

      customTxt = "<div>Blah blah sdfsffffdffffdffffdffffdffffd ffffdffffdffffdffffdffffdffffdffffd<ul><li>Blah 1<li>blah 2 </ul></div>"
      txt = new TxtOverlay(latlng, customTxt, "customBox", map)

    }
  </script>
  <style>
    .customBox {
      background: yellow;
      border: 1px solid black;
      position: absolute;
    }
  </style>
</head>

<body onload="init()">
  <div id="map" style="width: 600px; height: 600px;">
  </div>
</body>

</html>

0 讨论(0)

情书的邮戳

2020-11-30 01:36

To add custom text to google maps, you can use a marker with an empty pixel for the icon:

new google.maps.Marker({
    position: { lat: 0, lng: 0 },
    map: map,
    icon: '../res/img/empty.png',
    label: {
        color: '#FF0000',
        fontWeight: 'bold',
        text: 'Hello World',
        fontSize: '20px',
    },
});

Style options are listed here

0 讨论(0)

清歌不尽

2020-11-30 01:40
By far the easiest way to add a Text Overlay is to use the MapLabel class from https://github.com/googlemaps/js-map-label
```
var mapLabel = new MapLabel({
  text: 'Test',
  position: new google.maps.LatLng(50,50),
  map: map,
  fontSize: 20,
  align: 'right'
});
```
0 讨论(0)
发布评论:

提交评论
- 加载中...

迷失自我

2020-11-30 01:47

The latest (v3) API recommends using async defer and a callback when the Maps API is loaded.

<script async defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"></script>

To make this work you need to define the overlay class from within (or after) the initialization when the google class has been defined. Otherwise you will get google not defined errors.

function initMap() {
    var map = new google.maps.Map(document.getElementById('map'), {
        center: { lat: 40, lng: -30 },
        zoom: 3
    });

    TxtOverlay.prototype = new google.maps.OverlayView();
    var overlay = new TxtOverlay(new google.maps.LatLng(0, 0),
        "<div>Have a wonderful overlay day</div>", 
        "customCSSClass", 
        map);
}

...

//adapded from answer above
function TxtOverlay(pos, txt, cls, map) {
    // Now initialize all properties.
    this.pos = pos;
    this.txt_ = txt;
    this.cls_ = cls;
    this.map_ = map;

    // We define a property to hold the image's
    // div. We'll actually create this div
    // upon receipt of the add() method so we'll
    // leave it null for now.
    this.div_ = null;

    this.onAdd = function() {
        // Note: an overlay's receipt of onAdd() indicates that
        // the map's panes are now available for attaching
        // the overlay to the map via the DOM.

        // Create the DIV and set some basic attributes.
        var div = document.createElement('DIV');
        div.className = this.cls_;

        div.innerHTML = this.txt_;

        // Set the overlay's div_ property to this DIV
        this.div_ = div;
        var overlayProjection = this.getProjection();
        var position = overlayProjection.fromLatLngToDivPixel(this.pos);
        div.style.left = position.x + 'px';
        div.style.top = position.y + 'px';
        // We add an overlay to a map via one of the map's panes.

        var panes = this.getPanes();
        panes.floatPane.appendChild(div);
    }

    this.draw = function() {
        var overlayProjection = this.getProjection();

        // Retrieve the southwest and northeast coordinates of this overlay
        // in latlngs and convert them to pixels coordinates.
        // We'll use these coordinates to resize the DIV.
        var position = overlayProjection.fromLatLngToDivPixel(this.pos);

        var div = this.div_;
        div.style.left = position.x + 'px';
        div.style.top = position.y + 'px';
    }

    this.onRemove = function() {
        this.div_.parentNode.removeChild(this.div_);
        this.div_ = null;
    }

    this.hide = function() {
            if (this.div_) {
                this.div_.style.visibility = "hidden";
            }
        }

    this.show = function() {
        if (this.div_) {
            this.div_.style.visibility = "visible";
        }
    }

    this.toggle = function() {
        if (this.div_) {
            if (this.div_.style.visibility == "hidden") {
                this.show();
            } else {
                this.hide();
            }
        }
    }

    this.toggleDOM = function() {
        if (this.getMap()) {
            this.setMap(null);
        } else {
            this.setMap(this.map_);
        }
    }

    // Explicitly call setMap() on this overlay
    this.setMap(map);
}

0 讨论(0)

日久生厌

2020-11-30 01:54

Here is working code:

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

<div id="content">
  <div id="map"></div>
  <div class="centered">
    <h1>Text Over Maps</h1>
  </div>
</div>

0 讨论(0)