map marker info ins nicht angezeigt

-1

Ich steckte einfach in ein Problem mit Google-Map-Multi-Marker-Skript, ich habe mehrere Marker und wenn ich auf den externen Link für Standort klicke die Karte gezoomt in bestimmten Google Lat, Lon.map marker info ins nicht angezeigt

aber wenn Sie sehen können, habe ich Infobox auf jedem Marker. Wenn ich auf die Kartenmarkierung klicke, öffne die Infobox. aber wenn ich auf den externen Zoomlink klicke, wird die Info-Box des Markers nicht angezeigt.

kann mir jemand in dieser Angelegenheit helfen. Bitte überprüfen Sie das Beispiel in untenstehenden Link

http://saudisoftechportal.us/map.html

Quelle

2016-05-10 kamran Sheikh

Können Sie Ihren Code anzeigen? –

Das Problem ist, wenn Sie den externen Link klicken, werden die resetMap Methode Pfannen auf die erforderliche LatLng und zoomt auf den gegebenen Zoomstufe, aber nicht öffnet das Infofenster bei der Marker. Vielleicht sollten Sie auch ein Marker-Array entsprechend den Standorten verwenden. Hier ist ein Beispiel für Ihr Problem:

<!DOCTYPE html> 
<html> 
    <head> 
    <title>Map</title> 
    <meta name="viewport" content="initial-scale=1.0"> 
    <meta charset="utf-8"> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
    <style> 
     html, body { 
     height: 100%; 
     margin: 0; 
     padding: 0; 
     } 
     #map { 
     width: 100%; 
     height: 400px; 
     } 
    .maker{ margin:auto;} 
    .maker li{ list-style:none; float:left; width:100%; margin-bottom:8px;} 
    .maker li img{ width:34px; height:34px; display:block; float:left;} 
    .maker li span{ display: block; float: left; line-height: 27px; font-weight: bold; margin-left: 10px;} 
    </style> 
    </head> 
<body> 
    <div id="map"></div> 
    <div class="span4"> 
     <ul id="markerul" class="maker"> 
     </ul> 
    </div> 
    <script type="text/javascript"> 
     var map; 
     var infowindow; 
     var marker; 
     var markers = []; 
     var locations = [ 
       ['<strong>Head Office Khobar</strong>', 26.3411159,50.1936446,'http://downloadicons.net/sites/default/files/map-marker-icons-49653.png',0], 
       ['<strong>Dammam Office</strong>', 26.409727,50.1314224,'http://downloadicons.net/sites/default/files/map-marker-icons-49653.png',1], 
       ['<strong>Khafji Office</strong>', 28.4155603,48.509478,'http://downloadicons.net/sites/default/files/map-marker-icons-49653.png',2], 
       ['<strong>Riyadh Office</strong>', 24.6717577,46.7262669,'http://downloadicons.net/sites/default/files/map-marker-icons-49653.png',3], 
       ['<strong>Jeddah Office</strong>', 21.5228383,39.1793113,'http://downloadicons.net/sites/default/files/map-marker-icons-49653.png',4], 
       ['<strong>Warehouse</strong>', 26.4152548,50.1606446,'http://downloadicons.net/sites/default/files/map-marker-icons-49653.png',5], 
       ['<strong>Workshop</strong>', 26.4146399,50.156845,'http://downloadicons.net/sites/default/files/map-marker-icons-49653.png',6], 
       ['<strong>PMT Office</strong>', 14.576208,120.997944,'http://downloadicons.net/sites/default/files/map-marker-icons-49653.png',7] 
     ]; 
     function initMap(){ 
      map = new google.maps.Map(document.getElementById('map'), { 
       zoom: 5, 
       scrollwheel: false, 
       center: new google.maps.LatLng(23.884248, 45.078492), 
       mapTypeId: google.maps.MapTypeId.ROADMAP 
      }); 
      infowindow = new google.maps.InfoWindow(); 
      for (var i = 0; i < locations.length; i++) { 
       marker = new google.maps.Marker({ 
        position: new google.maps.LatLng(locations[i][1], locations[i][2]), 
        map: map, 
        icon: locations[i][3] 
       }); 
       markers.push(marker); 
      google.maps.event.addListener(marker, 'click', (function(marker, i) { 
       return function() { 
        infowindow.setContent(locations[i][0]); 
        infowindow.open(map, marker); 
       } 
       })(marker, i)); 
      } 

      listFill(); 
     } 
     function resetMap(elem, zoom) { 
      var newPos = new google.maps.LatLng(locations[elem][1], locations[elem][2]); 
      infowindow.setContent(locations[elem][0]); 
      infowindow.open(map, markers[elem]); 
      map.setZoom(zoom); 
      map.panTo(newPos); 
     }; 
     function listFill(){ 
      $('#markerul ul').html(''); 
      for (var i = 0; i < locations.length; i++) { 
       var liItem = '<li><a href="javascript:void(0);" onclick="resetMap(' + i + ',15);"><img src="' + locations[i][3] + '" alt="' + locations[i][0] + '"/><span>' + locations[i][0] + '</span></a></li>'; 
       $('#markerul').append(liItem); 
      }; 
     }; 
    </script> 
    <script async defer src="https://maps.googleapis.com/maps/api/js?callback=initMap"></script> 
</body> 
</html>

Ich hoffe, es hilft!

Quelle

2016-05-19 10:22:26 MKiss

map marker info ins nicht angezeigt

Antwort

Verwandte Themen