JQuery - Change value of Name, Longitude, and Latitude location in 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

you mean to say, when user click on address from the list next to map, display marker on position to show on map. right ? — Mr. J, Oct 26 '16 at 09:40
yes. exactly! I can't seem to figure out how to implement it. — Terence, Oct 26 '16 at 09:45

score 2 · Accepted Answer · answered Oct 26 '16 at 12:22

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

JQuery - Change value of Name, Longitude, and Latitude location in google maps api

1 Answers1