www.webdeveloper.com
Results 1 to 3 of 3

Thread: google maps table row click

  1. #1
    Join Date
    Sep 2014
    Posts
    2

    google maps table row click

    I have map with coordinates which is updating constantly.
    WHat i am trying to do is. Implement a tr click.
    I have table with the exact records of the map
    When i click on a row it should open the infowindow in the map.

    This my code
    Code:
    $(document).ready(function() {
    
    	//Time between marker refreshes
    	var INTERVAL = 2000;
    	
    	//Used to remember markers
    	var markerStore = [];
    	
    	var myLatlng = new google.maps.LatLng(5.8127569137510084, -55.16827583312988);
        var myOptions = {
            zoom: 13,
            center: myLatlng,
            mapTypeId: google.maps.MapTypeId.ROADMAP,
        }
        var map = new google.maps.Map(document.getElementById("map"), myOptions);
    	var infoWindow = new google.maps.InfoWindow;
    	
    	getMarkers();	
    
    	function getMarkers() {
    		console.log('getMarkers');
    		$.get('json.php', {}, function(res,resp) {
    			console.dir(res);
    			for(var i=0, len=res.length; i<len; i++) {
    				//Do we have this marker already?
    				if(markerStore.hasOwnProperty(res[i].DeviceID)) {
    					console.log('just funna move it...');
    					markerStore[res[i].DeviceID].setPosition(new google.maps.LatLng(res[i].LastLatitude,res[i].LastLongitude));
    				} else {
    					var html = 
    					"<b>" + "DeviceID: " + res[i].DeviceID +
    					"</b>" + "</br> Device: " + res[i].DeviceDesc + 
    					"<br/> Event date: " + res[i].LastEventDate + 
    					"<br/> Latitude: " + res[i].LastLatitude + 
    					"<br/> Longitude: " + res[i].LastLongitude + 
    					"<br/> Address: " + res[i].LastNearestAddress + 
    					"<br/> Speed: " + res[i].Speed + " KMph" +
    					"<br/> Satellite: " + res[i].SAT_Count;
    					var marker = new MarkerWithLabel({
    						position: new google.maps.LatLng(res[i].LastLatitude,res[i].LastLongitude),
    						title:res[i].DeviceDesc,
    						icon: 'assets/_layout/img/maps/'+res[i].EventColor+'.png',
    						map:map,
    						labelContent: i,
    						labelAnchor: new google.maps.Point(5, 27),
    						labelClass: "labels" // the CSS class for the label
    					});
    					bindInfoWindow(marker, map, infoWindow, html);	
    					markerStore[res[i].DeviceID] = marker;
    					console.log(marker.getTitle());
    				} 
    			}
    			window.setTimeout(getMarkers,INTERVAL);
    		}, "json");
    	}	
    
    	  function bindInfoWindow(marker, map, infoWindow, html) {
            google.maps.event.addListener(marker, 'click', function() {
                infoWindow.setContent(html);
                infoWindow.open(map, marker);
    			
    		});	
    		}
    	})

  2. #2
    Join Date
    Mar 2012
    Posts
    1,814
    And your problem is???

  3. #3
    Join Date
    Sep 2014
    Posts
    2
    I was unable to implement the tr row click option.
    I need a code which would allow me to open an infowindow when i try to click a table row.

    But i have it working now.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles