Google Haritalar Koordinatlarını "Onclick" ile değiştirin

Question

"Haritadaki Konumu Göster" hrefiyle javascript'te google harita koordinatlarını değiştirmem gerekiyor. Koordinatlar tabloda bulunmaktadır (td)

<script type='text/javascript'> 
      function init_map() { 
       var myOptions = { 
        zoom: 10 
        , center: new google.maps.LatLng(52.95628079999999, 4.76079720000007) 
        , mapTypeId: google.maps.MapTypeId.ROADMAP 
       }; 
       map = new google.maps.Map(document.getElementById('gmap_canvas'), myOptions); 

       //1 
       marker = new google.maps.Marker({ 
        map: map 
        , position: new google.maps.LatLng(52.95628079999999, 4.76079720000007) 
       }); 
       infowindow = new google.maps.InfoWindow({ 
        content: '<strong>TEST</strong><br>Den helder, nederland<br>' 
       }); 
       google.maps.event.addListener(marker, 'click', function() { 
        infowindow.open(map, marker); 
       }); 
       infowindow.open(map, marker); 
} 

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

<table> 
        <tr> 
         <th>ID</th> 
         <th>Box</th> 
         <th>User</th> 
         <th>Location</th> 
         <th>Coordinates</th> 
         <th>View</th> 
        </tr> 
        <tr> 
         <td>1</td> 
         <td>SUEZbox01</td> 
         <td>Arjan</td> 
         <td>Den Helder</td> 
         <td>52.939347, 4.754741</td> 
         <td><a href="javascript:void(0)">View Location On Map</a></td> 
        </tr> 
        <tr> 
         <td>2</td> 
         <td>SUEZbox02</td> 
         <td>Peter Vendrig</td> 
         <td>Amstelkwartier</td> 
         <td>52.160309, 6.413578</td> 
         <td><a href="">View Location On Map</a></td> 
        </tr> 

       </table> 

Answer 1

Seçeneklerden biri (JQuery kullanarak) haritayı ortalamak için tablonun dışına koordinatlarını ayrıştırmak ve bunları kullanmak için olacaktır:

$('a').click(function(evt) { 
    var coordsStr = $(this).parents().find(".coords").html(); 
    var coords = coordsStr.split(","); 
    var point = new google.maps.LatLng(coords[0], coords[1]); 
    map.setCenter(point); 
}); 

Şunu alarak ilişkili işaretleyici üzerinde InfoWindow açmak istiyorsanız, ayrıca adım, bunu yapabilirdi:

$('table tr').each(function(idx, item) { 
    var coordsStr = $(this).find(".coords").html(); 
    if (!coordsStr) return; 
    createMarker($(this)); 
}); 
$('a').click(function(evt) { 
    var coordsStr = $(this).parents().find(".coords").html(); 
    var coords = coordsStr.split(","); 
    var point = new google.maps.LatLng(coords[0], coords[1]); 
    map.setCenter(point); 
    google.maps.event.trigger(markers[coordsStr],'click'); 
}); 
google.maps.event.trigger(markers["52.939347, 4.754741"],'click'); 

proof of concept fiddle

kod pasajı:

var infowindow = new google.maps.InfoWindow(); 
 
var markers = []; 
 

 
function init_map() { 
 
    var myOptions = { 
 
    zoom: 10, 
 
    center: new google.maps.LatLng(52.95628079999999, 4.76079720000007), 
 
    mapTypeId: google.maps.MapTypeId.ROADMAP 
 
    }; 
 
    map = new google.maps.Map(document.getElementById('gmap_canvas'), myOptions); 
 

 
    $('table tr').each(function(idx, item) { 
 
    var coordsStr = $(this).find(".coords").html(); 
 
    if (!coordsStr) return; 
 
    createMarker($(this)); 
 
    }); 
 
    $('a').click(function(evt) { 
 
    var coordsStr = $(this).parents().find(".coords").html(); 
 
    var coords = coordsStr.split(","); 
 
    var point = new google.maps.LatLng(coords[0], coords[1]); 
 
    map.setCenter(point); 
 
    google.maps.event.trigger(markers[coordsStr], 'click'); 
 
    }); 
 
    google.maps.event.trigger(markers["52.939347, 4.754741"], 'click'); 
 
} 
 

 
function createMarker(jqe) { 
 
    var coordsStr = $(jqe).find(".coords").html(); 
 
    console.log(coordsStr); 
 
    coords = coordsStr.split(","); 
 
    var point = new google.maps.LatLng(coords[0], coords[1]); 
 
    var marker = new google.maps.Marker({ 
 
    map: map, 
 
    position: point 
 
    }); 
 
    var content = '<strong>TEST</strong><br>' + jqe.find("td").eq(3).html(); + '<br>' 
 
    google.maps.event.addListener(marker, 'click', function() { 
 
    infowindow.setContent(content); 
 
    infowindow.open(map, marker); 
 
    }); 
 
    markers[coordsStr] = marker; 
 
} 
 
google.maps.event.addDomListener(window, 'load', init_map);

html, 
 
body, 
 
#gmap_canvas { 
 
    height: 100%; 
 
    width: 100%; 
 
    margin: 0px; 
 
    padding: 0px 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> 
 
<script src="https://maps.googleapis.com/maps/api/js"></script> 
 
<table> 
 
    <tr> 
 
    <th>ID</th> 
 
    <th>Box</th> 
 
    <th>User</th> 
 
    <th>Location</th> 
 
    <th>Coordinates</th> 
 
    <th>View</th> 
 
    </tr> 
 
    <tr> 
 
    <td>1</td> 
 
    <td>SUEZbox01</td> 
 
    <td>Arjan</td> 
 
    <td>Den Helder</td> 
 
    <td class="coords">52.939347, 4.754741</td> 
 
    <td><a href="javascript:void(0)">View Location On Map</a> 
 
    </td> 
 
    </tr> 
 
    <tr> 
 
    <td>2</td> 
 
    <td>SUEZbox02</td> 
 
    <td>Peter Vendrig</td> 
 
    <td>Amstelkwartier</td> 
 
    <td class="coords">52.160309, 6.413578</td> 
 
    <td><a href="javasript:void()">View Location On Map</a> 
 
    </td> 
 
    </tr> 
 

 
</table> 
 
<div id="gmap_canvas"></div>