Googleマップのツールチップ

Question

私は誰かが私を助けてくれるかどうか疑問に思います。

私はGoogleマップ上に配置するマーカーのツールチップを作成しています。私は、この場合、フィールド名とアドレス、コード行はtitle: name+addressですので、私はユーザーに見たいと思う情報を表示するために、これを動作させることができます。

誰かが、これらの間にスペースを入れて、ツールチップが「名前アドレス」ではなく「名前アドレス」を読むように教えてください。

私は、例えば次のようなものを使用してあらゆる種類のことを試しました。 title: name'_'+ address、title: name' '+addressと私はそれを動作させることができません。

ご協力いただければ幸いです。

感謝

クリス

Answer 1

私が始めた値を初期化するために、この機能を使用します。

//Inicialize map values 
function initialize() { 

     latCenterMap=41.50347; 
     lonCenterMap=-5.74638; 
     zommCeneterMap=14; 
     latPoint=41.50347; 
     lonPoint=-5.74638; 


     //Values default initialize 
     var latlng = new google.maps.LatLng(latCenterMap, lonCenterMap); 

     var mapOptions = { 
      zoom: zommCeneterMap, 
      center: latlng, 
      mapTypeId: google.maps.MapTypeId.ROADMAP 
     }; 

     map = new google.maps.Map(document.getElementById('map-canvas_'), mapOptions);  

     codePoint(map, lat, lon);          
} 

私は位置を指すようにツールチップを作成するには、この機能を使用するマップ

//Get position by Latitude and Longitude   
function codePoint(map, lat, lon) { 

    var latlng = new google.maps.LatLng(parseFloat(lat), parseFloat(lon)); 
    var title = "Your text"; 

    var iconPoint = new google.maps.MarkerImage('images/pointBlue.png', 
     //Measure image 
     new google.maps.Size(25,25), 
     new google.maps.Point(0,0), 
     //Half measure image 
     new google.maps.Point(12.5,12.5) 
    ); 

    marker = new google.maps.Marker({ 
     position: latlng, 
     map: map, 
     icon: iconPoint, 
     tooltip: title 
    }); 

    customTooltip(marker); 
} 

に位置を指して、私は値を設定するには、この機能を使用

//TOOLTIP 
function customTooltip(marker){ 

    // Constructor function 
    function Tooltip(opts, marker) { 
     // Initialization 
     this.setValues(opts); 
     this.map_ = opts.map; 
     this.marker_ = marker; 
     var div = this.div_ = document.createElement("div"); 
     // Class name of div element to style it via CSS 
     div.className = "tooltip"; 
     this.markerDragging = false; 
    } 

    Tooltip.prototype = { 
     // Define draw method to keep OverlayView happy 
     draw: function() {}, 

     visible_changed: function() { 
      var vis = this.get("visible"); 
      this.div_.style.visibility = vis ? "visible" : "hidden"; 
     }, 

     getPos: function(e) { 
      var projection = this.getProjection(); 
      // Position of mouse cursor 
      var pixel = projection.fromLatLngToDivPixel(e.latLng); 
      var div = this.div_; 

      // Adjust the tooltip's position 
      var gap = 15; 
      var posX = pixel.x + gap; 
      var posY = pixel.y + gap; 

      var menuwidth = div.offsetWidth; 
      // Right boundary of the map 
      var boundsNE = this.map_.getBounds().getNorthEast(); 
      boundsNE.pixel = projection.fromLatLngToDivPixel(boundsNE); 

      if (menuwidth + posX > boundsNE.pixel.x) { 
       posX -= menuwidth + gap; 
      } 
      div.style.left = posX + "px"; 
      div.style.top = posY + "px"; 

      if (!this.markerDragging) { 
       this.set("visible", true); 
      }     
     }, 
     // This is added to avoid using listener (Listener is not working when Map is quickly loaded with icons) 
     getPos2: function(latLng) { 
      var projection = this.getProjection(); 
      // Position of mouse cursor 
      var pixel = projection.fromLatLngToDivPixel(latLng); 
      var div = this.div_; 
      // Adjust the tooltip's position 
      var gap = 5; 
      var posX = pixel.x + gap; 
      var posY = pixel.y + gap; 
      var menuwidth = div.offsetWidth; 
      // Right boundary of the map 
      var boundsNE = this.map_.getBounds().getNorthEast(); 
      boundsNE.pixel = projection.fromLatLngToDivPixel(boundsNE); 
      if (menuwidth + posX > boundsNE.pixel.x) { 
       posX -= menuwidth + gap; 
      } 
      div.style.left = posX + "px"; 
      div.style.top = posY + "px"; 
      if (!this.markerDragging) { 
       this.set("visible", true); 
      } 
     }, 

     addTip: function() { 
      var me = this; 
      var g = google.maps.event; 
      var div = me.div_; 
      div.innerHTML = me.get("text").toString(); 
      // Tooltip is initially hidden 
      me.set("visible", false); 
      // Append the tooltip's div to the floatPane 
      me.getPanes().floatPane.appendChild(this.div_); 
      // In IE this listener gets randomly lost after it's been cleared once. 
      // So keep it out of the listeners array. 
      g.addListener(me.marker_, "dragend", function() { 
       me.markerDragging = false; }); 
       // Register listeners 
       me.listeners = [ 
       // g.addListener(me.marker_, "dragend", function() { 
       // me.markerDragging = false; }), 
        g.addListener(me.marker_, "position_changed", function() { 
         me.markerDragging = true; 
         me.set("visible", false); }), 

        g.addListener(me.map_, "mousemove", function(e) { 
         me.getPos(e); }) 
      ]; 
      }, 

      removeTip: function() { 

       // Clear the listeners to stop events when not needed. 
       if (this.listeners) { 
        for (var i = 0, listener; listener = this.listeners[i]; i++) { 
         google.maps.event.removeListener(listener); 
        } 
        delete this.listeners; 
       } 
       // Remove the tooltip from the map pane. 
       var parent = this.div_.parentNode; 
        if (parent) parent.removeChild(this.div_); 
       } 
      }; 

     function inherit(addTo, getFrom) { 

      var from = getFrom.prototype; // prototype object to get methods from 
      var to = addTo.prototype;  // prototype object to add methods to 
      for (var prop in from) { 
      if (typeof to[prop] == "undefined") to[prop] = from[prop]; 
      } 
     } 

     // Inherits from OverlayView from the Google Maps API 
     inherit(Tooltip, google.maps.OverlayView); 

     var tooltip = new Tooltip({map: map}, marker); 
     tooltip.bindTo("text", marker, "tooltip"); 

     google.maps.event.addListener(marker, 'mouseover', function() { 
      tooltip.addTip(); 
      tooltip.getPos2(marker.getPosition()); 
     }); 

     google.maps.event.addListener(marker, 'mouseout', function() { 
      tooltip.removeTip(); 
     }); 
} 

このスタイルをファイルに使用します。

//CSS 
.tooltip { 
    position:absolute; 
    top:0; 
    left:0; 
    z-index: 300; 
    width: 11.5em; 
    padding: 5px; 
    font-size: 12pt; 
    font-family: klavika; 
    color: #fff; 
    background-color: #04A2CA; 
    border-radius: 10px; 
    box-shadow: 2px 2px 5px 0 rgba(50, 50, 50, 0.75); 
} 

Answer 2

あなたはこの

name + ' ' + address 

NBを試すことができます：あなたは引用符でスペースと両側に+を必要としています。