CODEWITHSUNDEEP
javascriptgoogle-maps-api-3
Giel Evens
Giel Evens

Reputation: 71

Change Google Maps Coordinates by "Onclick"

I need to change google maps coordinates in the javascript with the href "View Location On Map". The coordinates are in the table (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>

Upvotes: 0

Views: 1923

Answers (1)

geocodezip
geocodezip

Reputation: 161334

One option (using JQuery) would be to parse the coordinates out of the table and use them to center the map:

$('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);
});

Taking that one step further, if you want to open the infowindow on the associated marker, you could do this:

$('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

code snippet:

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>

Upvotes: 1

Related Questions