2013-06-12 5 views
0

У меня есть эти функции с API Карт Google для добавления маркеров.Добавить маркер onclick google maps api

Возможно ли показать информацию о маркере по ссылке href link?

Мои маркеры загружаются динамически ..

Это немного мой код до сих пор, но он не работает.

    <script type="text/javascript"> 
        var infowindow = new google.maps.InfoWindow(); 

        function addMarker(lat, lon, naam, straat, postcode, plaats, telefoon, afstand) 
        { 
         var marker = new google.maps.Marker({ 
          position: new google.maps.LatLng(lat, lon), 
          map: map, 
          icon: "afbeeldingen/pincard/wheel-icon.png", 
          title: naam 
         }); 

         google.maps.event.addListener(marker, 'click', function() { 
          var contentString = '<div>'+ 
          '<b style="border-bottom: 1px solid #000000;">' + naam + '</b><br/>'+ 
          'Afstand (hemelsbreed): ' + afstand + ' km<br/>' + 
          straat + '<br/>' + 
          postcode + ' ' + plaats + '<br/>'; 
          if(telefoon != "") 
          { 
           contentString = contentString + 'Telefoonnr: ' + telefoon; 
          } 
          contentString = contentString + '</div>'; 
          infowindow.setContent(contentString); 
          infowindow.open(map, marker); 
         }); 


        } 

        google.maps.event.addDomListener(window, 'load', initialize); 
       </script> 

Это HREF я использую:

<a href="javascript:google.maps.event.trigger(marker, 'click');">Click</a> 

Любая помощь будет приветствоваться :)

+0

Вы пытаетесь объявить маркер глобальным? Проблема в том, что «маркер» будет последним созданным ... –

ответ

0

Я получил врезку вещь работает должным образом в настоящее время. :)

Это мой окончательный код:

<script type="text/javascript"> 
         var geocoder; 
         var map; 
         var side_bar_html = ""; 
         var gmarkers = []; 
         var infobox; 
         function initialize() { 

    var blueOceanStyles = [ 
    { 
     featureType: "all", 
     elementType: "all", 
     stylers: [ 
     { saturation: -100 } // <-- THIS 
     ] 
    } 
]; 

          geocoder = new google.maps.Geocoder(); 
          var myOptions = { 
           zoom: <?php 
           if(is_array($postcodevelden) && count($postcodevelden) > 0 && !empty($_POST['address'])) 
           { 
            switch($radius) 
            { 
             case "5": 
              echo "12"; 
              break; 
             case "10": 
              echo "11"; 
              break; 
             case "15": 
             case "20": 
              echo "10"; 
              break; 
             case "30": 
             case "40": 
              echo "9"; 
              break; 
            } 
           } 
           else 
           { 
            echo "7"; 
           } 
           ?>, 
           center: new google.maps.LatLng(<?php if(is_array($postcodevelden) && count($postcodevelden) > 0) { echo $lat.", ".$lon; } else { echo "52.2008737173322, 5.25146484375"; } ?>),    
          mapTypeId: google.maps.MapTypeId.ROADMAP 
          } 
          map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); 
          map.setOptions({styles: blueOceanStyles}); 

<?php 
     if(is_array($adressen) AND count($adressen) > 0) 
     { 
      foreach($adressen as $adres) 
      { 
       $afstand = round((6371 * acos(sin(deg2rad($lat)) * sin(deg2rad($adres->locatie_lat)) + cos(deg2rad($lat)) * cos(deg2rad($adres->locatie_lat)) * cos(deg2rad($adres->locatie_lon) - (deg2rad($lon))))), 2); 
?> 
          addMarker(<?php echo $adres->locatie_lat.", ".$adres->locatie_lon.", '".$adres->locatie_naam."', '".$adres->locatie_straat."', '".$adres->locatie_postcode."', '".$adres->locatie_plaats."', '".$adres->locatie_telefoon."', '".$afstand."'"; ?>); 
<?php 
      } 
     } 
?> 
document.getElementById("marker_list").innerHTML = side_bar_html; 
         } 
         function myclick(i) { 
    map.setCenter(gmarkers[i].getPosition()); 
    google.maps.event.trigger(gmarkers[i], "click"); 
} 
          infowindow = new InfoBox({ 
          content: document.getElementById("infobox"), 
          disableAutoPan: false, 
          maxWidth: 150, 
          pixelOffset: new google.maps.Size(-140, 0), 
          zIndex: null, 
          boxStyle: { 
           background: "url('http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobox/examples/tipbox.gif') no-repeat", 
           opacity: 0.95, 
           width: "280px" 
          }, 
          closeBoxMargin: "12px 4px 2px 2px", 
          closeBoxURL: "http://www.google.com/intl/en_us/mapfiles/close.gif", 
          infoBoxClearance: new google.maps.Size(1, 1) 
         }); 

         function addMarker(lat, lon, naam, straat, postcode, plaats, telefoon, afstand) 
         { 
          var marker = new google.maps.Marker({ 
           position: new google.maps.LatLng(lat, lon), 
           map: map, 
           icon: "afbeeldingen/pincard/wheel-icon.png", 
           title: naam 
          }); 

          google.maps.event.addListener(marker, 'click', function() { 
           var contentString = '<div id="infobox">'+ 
           '<b style="border-bottom: 1px solid #f6ee34; color:#ee2a24;">' + naam + '</b><br/>'+ 
           'Afstand (hemelsbreed): ' + afstand + ' km<br/>' + 
           straat + '<br/>' + 
           postcode + ' ' + plaats + '<br/>'; 
           if(telefoon != "") 
           { 
            contentString = contentString + 'Telefoonnr: ' + telefoon; 
           } 
           contentString = contentString + '</div>'; 
           infowindow.setContent(contentString); 
           infowindow.open(map, marker); 
          }); 
           gmarkers.push(marker); 

    side_bar_html += '<tr>'+ '<td onclick="javascript:myclick(' + (gmarkers.length-1) + ')"><a>' + naam + '<br/>' + straat + '<br/>' + postcode + ' ' + plaats + '<br/>' + 'Afstand ' + afstand + ' km' +'</td>' +'<\/a></tr><br>'; 

         } 

         google.maps.event.addDomListener(window, 'load', initialize); 
        </script> 

я получить полный список всех Почтовые индексы в диапазоне, введенных пользователем. Теперь я не могу понять, как я могу сортировать вывод на боковой панели, но это другой вопрос.

+0

Поскольку у вас есть решение исходного вопроса, вы должны задать новый вопрос о новой проблеме. Я отредактировал этот ответ, чтобы сосредоточиться на ответе. [Пожалуйста, используйте ответы исключительно для ответа на вопрос] (// meta.stackoverflow.com/q/92107). Если у вас есть НОВЫЙ вопрос, пожалуйста, спросите его, нажав кнопку [Ask Question] (// stackoverflow.com/questions/ask). Включите ссылку на этот вопрос, если это поможет обеспечить контекст. Икс – Mogsdad