如何在Google Maps InfoWindow中创建CSS样式的dom元素？

Question

我尝试在Google Maps infoWindow中创建一个自定义元素，但是它不起作用。 我也正确链接了CSS和javascript。

function openWindow(map,marker){
    var contentString = '<div id="content">'+
      '<div id="siteNotice">'+
      '</div>'+
      '<h1 id="firstHeading" class="firstHeading">Place #1</h1>'+
      '<div id="bodyContent">'+
      '<div class="panel panel-default" id="spr_32">
        <div class="panel-heading">
          <h4 class="panel-title">With buttons</h4>
          <div class="panel-heading-content"><a href="#" class="btn btn-success btn-xs">Like</a></div>
        </div>
        <div class="panel-body">Place. place continues and this stupid place doesnot make sense.</div>
      </div>'+
      '</div>'+
      '</div>';

  var infowindow = new google.maps.InfoWindow({
    content: contentString,
    maxwidth:600
  });
  google.maps.event.addListener(marker, 'click', function() {
           infowindow.open(map,marker);
  });
}

Answer 1

您要设定标记吗？ 因为在单击功能上，它期望“标记”作为参数。 您需要在点击事件监听器上方设置标记变量。 让我为这些自定义地图编写解决方案，可能会有所帮助：

/* 1 - SET OPTIONS AND STYLES */

          var mapId = "mapId";
          var latitude = 40.986809;
          var longitude = 29.021807;
          var mapName = "Your Map Name";
          var zoomLevel = 16;
          var iconUrl = 'http://path/to/googleMaps/logo.png';
          var scrollable = false;
          var disableDefaultUI = false;
          var draggableMarker = false;
          var marker;
          var map;
          var contentString = '<div id="mapContent">'+
                '<div id="siteNotice">'+
                '</div>'+
                '<h1 id="firstHeading" class="firstHeading">Lorem ipsum</h1>'+
                '<div id="bodyContent">'+
                '<p><b>Lorem ipsum</b>, dolor sit amet'+

                '</p>'+
                '</div>'+
                '</div>';
          var styles = [
            //Custom Styles

          ];



          /* 2 - INITIALIZE THE MAP WITH YOUR OPTIONS ABOVE */

          function initialize() {
              var mapOptions = {
                  zoom: zoomLevel,
                  scrollwheel: scrollable,
                  center: new google.maps.LatLng(latitude,longitude),
                  mapTypeControlOptions: {
                      mapTypeIds: [mapName]
                  },
                  disableDefaultUI: disableDefaultUI,
                  panControl: false,
                  zoomControl: true,
                  scaleControl: true
              };
              var div = document.getElementById(mapId);
              var map = new google.maps.Map(div, mapOptions);
              var styledMapType = new google.maps.StyledMapType(styles, { name: mapName });
              map.mapTypes.set(mapName, styledMapType);
              map.setOptions({styles: styles});



              /***************** MARKER *********************************/
              marker = new google.maps.Marker({
                  map:map,
                  draggable:draggableMarker,
                  icon: iconUrl,
                  animation: google.maps.Animation.DROP,
                  position: new google.maps.LatLng(latitude,longitude)
              });



              /***************** INFO WINDOW *********************************/
              var infowindow = new google.maps.InfoWindow({
                  content: contentString
              });

              /*If you initialize infowindow on window load*/
              infowindow.open(map,marker);


              google.maps.event.addListener(marker, 'click', function() {
                  infowindow.open(map,marker); 
              });
          }




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

希望这可以帮助