google maps html code in infowindow вместо pure tekst

Я просто нашел этот удивительный код при переполнении стека. Он открывает инфузию, нажимая кнопку. Но проблемы есть. Вместо информационного окна только «marker1» я хочу вместо этого реализовать html-код. Но я терпеть неудачу, когда я это делаю. Я просто хочу реализовать простой код, например, h1 и un. Но он утверждает только чистый текст.google maps html code in infowindow вместо pure tekst

<html> 
<head> 
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&language=en"></script> 
    <script src="http://code.jquery.com/jquery-1.9.0.min.js"></script> 
    <script> 
     function infoOpen(i) 
     { 

      google.maps.event.trigger(gmarkers[i], 'click'); 
     } 
     var gmarkers = []; 
     var markers = []; 
     markers = [ 
      ['0', 'Marker 1', 13.988719, 100.617909], 
      ['1', 'Marker 2', 13.662811, 100.43758], 
      ['2', 'Marker 3', 13.744961, 100.535073], 
      ['3','Marker 4', 13.801981, 100.613864], 
      ['4', 'Marker 5', 13.767507, 100.644024]]; 

     $(document).ready(function() { 
      var myOptions = { 
       mapTypeId: google.maps.MapTypeId.ROADMAP, 
       mapTypeControl: false 
      }; 

      var map = new google.maps.Map(document.getElementById("map"), myOptions); 
      var image = new google.maps.MarkerImage('img/marker.png', 
      new google.maps.Size(65, 32), 
      new google.maps.Point(0, 0), 
      new google.maps.Point(18, 42)); 
      var infowindow = new google.maps.InfoWindow(); 
      var marker, i; 
      var bounds = new google.maps.LatLngBounds(); 

      for (i = 0; i < markers.length; i++) { 
       var pos = new google.maps.LatLng(markers[i][2], markers[i][3]); 
       var content = markers[i][1]; 
       bounds.extend(pos); 
       marker = new google.maps.Marker({ 
        position: pos, 
        map: map 
       }); 
       gmarkers.push(marker); 
       google.maps.event.addListener(marker, 'click', (function(marker, content) { 
        return function() { 
         infowindow.setContent(content); 
         infowindow.open(map, marker); 
        } 
       })(marker, content)); 
      } 


      map.fitBounds(bounds); 
     }); 
    </script> 
    <style> 
     body { 
      text-align: center 
     } 
     #map { 
      width:640px; 
      height: 480px; 
      border:6px solid #6f5f5e; 
      margin:20px auto 30px auto; 
     } 
    </style> 
</head> 
<body> 
    <div> 
     <a href="javascript:void(0);" onclick="infoOpen('0');">mark 1</a> <a href="javascript:void(0);" onclick="infoOpen('1');">mark 2</a> <a href="javascript:void(0);" onclick="infoOpen('2');">mark 3</a> <a href="javascript:void(0);" onclick="infoOpen('3');">mark 4</a> <a href="javascript:void(0);" onclick="infoOpen('4');">mark 5</a> 

     <div id="map">&nbsp;</div> 
    </div> 
</body>

Это то, что я хочу, но он не работает:

<html> 
<head> 
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&language=en"></script> 
    <script src="http://code.jquery.com/jquery-1.9.0.min.js"></script> 
    <script> 
     function infoOpen(i) 
     { 

      google.maps.event.trigger(gmarkers[i], 'click'); 
     } 
     var gmarkers = []; 
     var markers = []; 
     markers = [ 
      ['0', '<h1>title</h1><p>tekst</p>', 13.988719, 100.617909], 
      ['1', 'Marker 2', 13.662811, 100.43758], 
      ['2', 'Marker 3', 13.744961, 100.535073], 
      ['3','Marker 4', 13.801981, 100.613864], 
      ['4', 'Marker 5', 13.767507, 100.644024]]; 

     $(document).ready(function() { 
      var myOptions = { 
       mapTypeId: google.maps.MapTypeId.ROADMAP, 
       mapTypeControl: false 
      }; 

      var map = new google.maps.Map(document.getElementById("map"), myOptions); 
      var image = new google.maps.MarkerImage('img/marker.png', 
      new google.maps.Size(65, 32), 
      new google.maps.Point(0, 0), 
      new google.maps.Point(18, 42)); 
      var infowindow = new google.maps.InfoWindow(); 
      var marker, i; 
      var bounds = new google.maps.LatLngBounds(); 

      for (i = 0; i < markers.length; i++) { 
       var pos = new google.maps.LatLng(markers[i][2], markers[i][3]); 
       var content = markers[i][1]; 
       bounds.extend(pos); 
       marker = new google.maps.Marker({ 
        position: pos, 
        map: map 
       }); 
       gmarkers.push(marker); 
       google.maps.event.addListener(marker, 'click', (function(marker, content) { 
        return function() { 
         infowindow.setContent(content); 
         infowindow.open(map, marker); 
        } 
       })(marker, content)); 
      } 


      map.fitBounds(bounds); 
     }); 
    </script> 
    <style> 
     body { 
      text-align: center 
     } 
     #map { 
      width:640px; 
      height: 480px; 
      border:6px solid #6f5f5e; 
      margin:20px auto 30px auto; 
     } 
    </style> 
</head> 
<body> 
    <div> 
     <a href="javascript:void(0);" onclick="infoOpen('0');">mark 1</a> <a href="javascript:void(0);" onclick="infoOpen('1');">mark 2</a> <a href="javascript:void(0);" onclick="infoOpen('2');">mark 3</a> <a href="javascript:void(0);" onclick="infoOpen('3');">mark 4</a> <a href="javascript:void(0);" onclick="infoOpen('4');">mark 5</a> 

     <div id="map">&nbsp;</div> 
    </div> 
</body>

источник

2014-09-09 Zincktest

Вы разместили рабочий пример, то лучше размещать вашу попытку, которая не работала –

2-ая часть работает для меня тоже, когда ваша проблема размер/отображение InfoWindow: это известная ошибка в течение длительного времени, см. [** Ошибка: InfoWindow изменяет размер неправильно и имеет полосы прокрутки **] (https://code.google.com/p/gmaps-api-issues/issues/detail?id=5713) (возможно, вы найдете подходящий подход) –

Interdasting !! Оно работает. Grazy bug – Zincktest

Можете ли вы объяснить, который выбрасывается ошибка JS? Я использую что-то вроде этого

infoWindow = new google.maps.InfoWindow({ 
     content: data, 
     maxWidth: 300, 
     minHeight: 400, 
     mId: marcador.mId 
    }); 

    infoWindow.open(map, marcador);

Если данные - любая строка HTML, которую вы хотите положить. Например:

<h1>Title</h1> <p>Text</p>

источник

2014-09-09 18:16:03

js error 404 не найден. Я просто попытался реализовать своего идеера. он сказал то же самое. Как бы вы его реализовали. – Zincktest

google maps html code in infowindow вместо pure tekst

ответ

Смежные вопросы