javascript - listing the data and the map moving when the data is clicked -

javascript - listing the data and the map moving when the data is clicked -

my title may have made me sound idiot. didnt know how name want here. location of individuals info database in json format. using marker clusterer jquery plugin, these individuals pin pointed on map. did on website. http://www.fetalhope.org/patients-families/treatment?cid=168&x=35&y=14

i appreciate if can help me build same setting. willing pay well, unemployed dont expect much. trying learn.

{ "users": [ { "name": "john doe", "latitude": "22.3430194444444", "longitude": "114.110386111111" }, { "name": "john doe", "latitude": "48.4048403957642", "longitude": "2.68452644348145" } ] } $(function checkinmap() { $.when($.ajax({ type: "get", datatype: "json", url: "content/sewerage/index.cs.asp?process=viewmap" })).done( function initialize(data) { var mapdata = data; var center = new google.maps.latlng(41.00527, 28.97696); var map = new google.maps.map(document.getelementbyid('checkinmap'), { zoom: 6, center: center, maptypeid: google.maps.maptypeid.roadmap, maxzoom: 14 }); var markers = []; (var = 0; < mapdata.users.length; i++) { var location = mapdata.users[i]; var latlng = new google.maps.latlng(location.nidlatitude, location.nidlongitude); var marker = new google.maps.marker({ position: latlng }); markers.push(marker); } var markercluster = new markerclusterer(map, markers); }); });

depending on version of api using (the illustration v3) of google maps can utilize listener on marker , when it's clicked can value, allow id, identify element want focus on list. so, assuming have marker, can extend , add together id.

var markeritem = new google.maps.marker(); markeritem.metadata = {id: 1};

and add together event listener:

google.maps.event.addlistener(markeritem, 'click', function () { var targetid = markeritem.get("id"); //do target id scrolling desired point of list });

within event can center map lat/long of clicked marker, create new infowindow , show etc,,:

var infowindowitem = new google.maps.infowindow({content: 'some content here!'}); infowindowitem.open(map, markeritem);

javascript jquery google-maps