jQuery-在Google Maps API中更改名称，经度和纬度位置的值

Question

I am trying to implement a feature on my site where certain list of places are displayed next to a Map that when a user selects a place in the list it automatically sets the Name, Longitude, and Latitude on the map for the user to identify where it is.

Unfortunately, I got stuck in changing the value of the Name, Longitude, and Latitude in the map if the user selects a different place in the list.

I referred to this stackoverflow question

so far I have come up with this code.

HTML

    <div class="col-md-12">

    <div class="col-md-3">
        <div class="list-group">
            <a href="#" class="list-group-item" data-itemtype="['Maroubra Beach', '-33.950198', '151.259302']">Cras justo odio</a>
            <a href="#" class="list-group-item" data-itemtype="['Coogee Beach', '-33.923036', '151.259052']">Dapibus ac facilisis in</a>
            <a href="#" class="list-group-item" data-itemtype="['Cronulla Beach', '-34.028249', '151.157507']">Morbi leo risus</a>
            <a href="#" class="list-group-item" data-itemtype="['Manly Beach', '-33.80010128657071', '151.28747820854187']">Porta ac consectetur ac</a>
            <a href="#" class="list-group-item" data-itemtype="['Bondi Beach', '-33.890542', '151.274856']">Vestibulum at eros</a>
        </div>
    </div>

    <div class="col-md-9">
        <div id="map"></div>
    </div>

</div>


<script src="~/Scripts/jquery-1.10.2.min.js"></script>

<script>

      // Note: This example requires that you consent to location sharing when
      // prompted by your browser. If you see the error "The Geolocation service
      // failed.", it means you probably did not give permission for the browser to
      // locate you.

    function initMap(mapLocation) {

        var map = new google.maps.Map(document.getElementById('map'), {
            zoom: 10,
            center: new google.maps.LatLng(-33.92, 151.25),
            mapTypeId: google.maps.MapTypeId.ROADMAP
        });

        var infowindow = new google.maps.InfoWindow();

        var marker, i;

        for (i = 0; i < mapLocation; i++) {
            marker = new google.maps.Marker({
                position: new google.maps.LatLng(mapLocation[i][1], mapLocation[i][2]),
                map: map
            });
        }

    }

    $('.list-group-item').on('click', function (e) {

        var previous = $(this).closest(".list-group").children(".active");
        previous.removeClass('active'); // previous list-item
        $(e.target).addClass('active'); // activated list-item

        var locations = $('.list-group').find('.active').data('itemtype');

        initMap(locations);

    });

</script>
<script async defer
        src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB3qsbdbcouUb6qSaBxQCuiEDI03JA-zLc&callback=initMap">
</script>

please help me to be on track with the development.

Thank you in advance

Answer 1

A solution using data attributes. I modified your data attributes slightly because using...

data-itemtype="['Maroubra Beach', '-33.950198', '151.259302']"

...doesn't give you an array to use, just a string that looks like an array.

HTML:

<div class="container">
 <div class="row">
  <div class="list-group col-sm-2">
          <a id="0" href="#" class="list-group-item" data-name='Maroubra Beach' data-lat='-33.950198' data-lng='151.259302'>Cras justo odio</a><br />
          <a id="1" href="#" class="list-group-item" data-name='Coogee Beach' data-lat='-33.923036' data-lng='151.259052'>Dapibus ac facilisis in</a><br />
          <a id="3" href="#" class="list-group-item" data-name='Cronulla Beach' data-lat='-34.028249' data-lng='151.157507'>Morbi leo risus</a>
  </div>
  <div class="col-sm-10">    
      <div id="map_canvas"></div>
  </div>
 </div>
</div>

Javacript:

(function(Mapping, $, undefined) {
    var self = this;

    function Initialize() {
        var myOptions = {
          zoom: 10,
            center: new google.maps.LatLng(-33.92, 151.25),
            mapTypeId: google.maps.MapTypeId.ROADMAP
      };
      self.map = new google.maps.Map(document.getElementById("map_canvas"),myOptions);
      self.infoWindow = new google.maps.InfoWindow();

      $('.list-group-item').each(function() {
        var $this = $(this);
        var pos = new google.maps.LatLng($this.data('lat'), $this.data('lng'));
        var marker = new google.maps.Marker({
                        position: pos,
                        map: self.map
                      });

        $this.click(function() {
            self.map.panTo(pos);
            self.infoWindow.setContent($this.data('name'));
            self.infoWindow.open(self.map, marker);
            $this.siblings().removeClass('active');
            $this.addClass('active');
        });
      });
  }

  Initialize();
})(window.Mapping = window.Mapping || {}, jQuery);

JSFiddle