javascript - How to add setCenter on Map that is controlled by Radio button inside the List that is populated by .Each Loop -
i have problem because have list populated .each loop, , in every item on list there address radio button, question how can focus or setcenter when radio button selected because tried getelementbyid
focuses on last queried address. . in advance 1 me :)
this set of codes
function initialize() { var minzoomlevel = 4; var zooms = 7; geocoder = new google.maps.geocoder(); geocode = new google.maps.geocoder(); // used set center of maps on logged user $.getjson('/dashboard/loadaddress', function geocoding(address) { $.each(address, function () { customerlocationid = this["id"]; var currvaladdress = this["addressline1"]; var latitude = this["latitude"]; var longitude = this["longitude"]; latlang = new google.maps.latlng(latitude, longitude); var addresse = { zoom: 16, center: latlang, maptypeid: google.maps.maptypeid.roadmap }; map = new google.maps.map(document.getelementbyid('map'), addresse); var link = $('<input type="radio" name="a" id="radio' + customerlocationid + '"/><label>' + currvaladdress + '</label>').data('location', latlang); $('#initialplace').append($('<li id=\'list\' class=\'list\'>').append(link)); var radio = "radio" + customerlocationid; google.maps.event.adddomlistener(document.getelementbyid(radio), 'click', function () { }); // bounds north america var strictbounds = new google.maps.latlngbounds( new google.maps.latlng(15.70, -160.50), new google.maps.latlng(68.85, -55.90)); // listen dragend event google.maps.event.addlistener(map, 'dragend', function () { if (strictbounds.contains(map.getcenter())) return; // we're out of bounds - move map within bounds var c = map.getcenter(), x = c.lng(), y = c.lat(), maxx = strictbounds.getnortheast().lng(), maxy = strictbounds.getnortheast().lat(), minx = strictbounds.getsouthwest().lng(), miny = strictbounds.getsouthwest().lat(); if (x < minx) x = minx; if (x > maxx) x = maxx; if (y < miny) y = miny; if (y > maxy) y = maxy; map.setcenter(new google.maps.latlng(y, x)); }); // limit zoom level google.maps.event.addlistener(map, 'zoom_changed', function () { if (map.getzoom() < minzoomlevel) map.setzoom(minzoomlevel); }); }); }); if (customerlocationid != 0) { codeaddress(customerlocationid, rad); } }
the code want control setcenter of map here
var link = $('<input type="radio" name="a" id="radio' + customerlocationid + '"/><label>' + currvaladdress + '</label>').data('location', latlang); $('#initialplace').append($('<li id=\'list\' class=\'list\'>').append(link)); var radio = "radio" + customerlocationid; google.maps.event.adddomlistener(document.getelementbyid(radio), 'click', function () { //google.maps.event.trigger(map, 'resize'); // or whatever });
i belive should put event handler on each radio call maps setcenter() method. this:
function initialize() { ... ... var map = new google.maps.map(...); ... ... $('#initialplace input[type="radio"]').click(function() { map.setcenter($(this).data('location')); }); }
Comments
Post a Comment