Hi Larry,Thanks for your suggestions. I went back through it and made the changes, but I'm still not able to see any of the markers on my map. Also using the debugger I am getting an error at line 46 var numRows = response.getDataTable().getNumberOfRows(); Background: I got this code from http://gmaps-samples.googlecode.com/svn/trunk/fusiontables/custom_markers.htmlWhen I copy and paste this code into Dreamweaver, it works fine, no errors, when I replace it with my fusion table data I get the error. Sorry, I'm really lost, any advice? Here's the revised code(http://www.advocacy.ucla.edu/Maps/ communitybanners/CommunityBanner_Locations.html):<!DOCTYPE html> <html> <head> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <meta http-equiv="content-type" content="text/ html; charset=UTF-8"/> <title>Google Maps JavaScript API v3 Example: Fusion Tables Layer</ title> <style> body { font-family: Arial, sans-serif; } #map_canvas { height: 600px; width:700px; }</style> <script type="text/javascript" src="http://maps.google.com/maps/api/js? sensor=false"></script><script type="text/javascript" src="http:// www.google.com/jsapi"></script> <script type="text/javascript" id="script">google.load('visualization', '1'); var tableid = 2177811;var map;var lastWindow; function initialize() { map = new google.maps.Map(document.getElementById('map_canvas'), { center: new google.maps.LatLng(34.30941257937057, -118.1689453125), zoom: 9, mapTypeId: google.maps.MapTypeId.ROADMAP }); setData();} function setData() { // Create a Chart Tools query to send to Fusion Tables var query = new google.visualization.Query( 'http:// www.google.com/fusiontables/gvizdata?tq=' + encodeURIComponent("SELECT 'name', 'geometry', 'Coordinates', FROM 2177811") ); query.send(getData);} // Define callback function, this is called when the results are returnedfunction getData(response) { var numRows = response.getDataTable().getNumberOfRows(); for (i = 0; i < numRows; i++) { var string_coordinates = response.getDataTable().getValue(i, 1); var split_coordinates = string_coordinates.split(","); var lat = split_coordinates[0]; var lng = split_coordinates[1]; var coordinate = new google.maps.LatLng(lat, lng); // Get row data for the info window var name = response.getDataTable().getValue(i, 0); createMarker(name, Coordinates); }} function createMarker(name, Coordinates) { // Create the marker var marker = new google.maps.Marker({ map: map, position: Coordinates, icon: new google.maps.MarkerImage("http:// www.advocacy.ucla.edu/Maps/communitybanners/communitybanner.png") }); google.maps.event.addListener(marker, 'click', function(event) { if (lastWindow) { lastWindow.close(); } else { lastWindow = new google.maps.InfoWindow(); } // Set the position and contents of the info window, and open the window lastWindow.setPosition(coordinate); lastWindow.setContent(name); lastWindow.open(map); });} </script> </head><body onload="initialize()"><div id="map_canvas"></div> <div id="code"></div><script type="text/javascript" src="script/ script.js"></script></body> </html>
On Nov 15, 5:32 pm, "geocode...@gmail.com" <geocode...@gmail.com> wrote:> On Nov 15, 4:56 pm, Amelia Griza-Padilla <ameliagpadi...@gmail.com>> wrote:> > > Hello,> > I'm am having some problems with creating custom markers for my> > entries in a fusion table. Here is the link (http://www.advocacy.ucla.edu/Maps/ communitybanners/communitybanner_lo......)> > and below is the code, any ideas why this isn't working?> > 1. What do you mean by "isn't working"?> > Looking at it, there are a number of issues. I would think the> javascript console should point some out.> > 1. You are only requesting the 'geometry' column in your query, you> need 'Coordinates' and 'name' also.> "SELECT 'geometry', 'Coordinates', 'name' FROM 2177811"> > 2. Your Coordinates column is at 188 degrees of longitude, Los Angeles> is at -118 degrees of longitude.> > 3. Your createMarker function takes only one parameter (name), but> needs two (name and coordinates).> > Beware, these queries can only return a maximum of 500 rows, if you> add more locations than that they will not display.> > -- Larry> > > > > > > > > > > <!DOCTYPE html>> > > <html>> > <head>> > <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> > > <meta http-equiv="content-type" content="text/ html; charset=UTF-8"/>> > > <title>Community Programs</title>> > > <style>> > body { font-family: Arial, sans-serif; }> > #map_canvas { height: 600px; width:700px; }> > </style>> > > <script type="text/ javascript" src="http://maps.google.com/maps/api/js?> > sensor=false"></script>> > <script type="text/javascript" src="http:// www.google.com/jsapi"></> > script>> > > <script type="text/ javascript" id="script">> > google.load('visualization', '1');> > > var tableid = 2177811;> > var map;> > var lastWindow;> > > function initialize() {> > map = new google.maps.Map(document.getElementById('map_canvas'), {> > center: new google.maps.LatLng(34.30941257937057,> > -118.1689453125),> > zoom: 9,> > mapTypeId: google.maps.MapTypeId.ROADMAP> > });> > > setData();> > > }> > > function setData() {> > // Create a Chart Tools query to send to Fusion Tables> > var query = new google.visualization.Query(> > 'http://www.google.com/fusiontables/gvizdata?tq='+> > encodeURIComponent("SELECT 'geometry' FROM 2177811")> > );> > query.send(getData);> > > }> > > // Define callback function, this is called when the results are> > returned> > function getData(response) {> > > // For more information on the response object, see the> > documentation> > //http://code.google.com/apis/visualization/ documentation/reference.htm...> > var numRows = response.getDataTable().getNumberOfRows();> > > for (i = 0; i < numRows; i++) {> > var string_coordinates = response.getDataTable().getValue(i, 1);> > var split_coordinates = string_coordinates.split(",");> > var lat = split_coordinates[0];> > var lng = split_coordinates[1];> > var coordinate = new google.maps.LatLng(lat, lng);> > > // Get row data for the info window> > var name = response.getDataTable().getValue(i, 0);> > > createMarker(name);> > }> > > }> > > function createMarker(name) {> > // Create the marker> > var marker = new google.maps.Marker({> > map: map,> > position: coordinate,> > icon: new google.maps.MarkerImage("http://www.advocacy.ucla.edu/> > Maps/communitybanners/banner-with-url.use-c.png")> > });> > > google.maps.event.addListener(marker, 'click', function(event) {> > if (lastWindow) {> > lastWindow.close();> > } else {> > lastWindow = new google.maps.InfoWindow();> > }> > > // Set the position and contents of the info window, and open the> > window> > lastWindow.setPosition(coordinate);> > lastWindow.setContent(name);> > lastWindow.open(map);> > });}> > > </script>> > > </head>> > <body onload="initialize()">> > <div id="map_canvas"></div>> > > <div id="code"></div>> > <script type="text/javascript" src="script/script.js"></script>> > </body>> > </html> On Nov 15, 5:32 pm, "geocode...@gmail.com" <geocode...@gmail.com> wrote: > On Nov 15, 4:56 pm, Amelia Griza-Padilla <ameliagpadi...@gmail.com> > wrote: > > > Hello, > > I'm am having some problems with creating custom markers for my > > entries in a fusion table. Here is the link > > (http://www.advocacy.ucla.edu/Maps/communitybanners/communitybanner_lo......) > > and below is the code, any ideas why this isn't working? > > 1. What do you mean by "isn't working"? > > Looking at it, there are a number of issues. I would think the > javascript console should point some out. > > 1. You are only requesting the 'geometry' column in your query, you > need 'Coordinates' and 'name' also. > "SELECT 'geometry', 'Coordinates', 'name' FROM 2177811" > > 2. Your Coordinates column is at 188 degrees of longitude, Los Angeles > is at -118 degrees of longitude. > > 3. Your createMarker function takes only one parameter (name), but > needs two (name and coordinates). > > Beware, these queries can only return a maximum of 500 rows, if you > add more locations than that they will not display. > > -- Larry > > > > > > > > > > > <!DOCTYPE html> > > > <html> > > <head> > > <meta name="viewport" content="initial-scale=1.0, user-scalable=no" / > > > <meta http-equiv="content-type" content="text/html; charset=UTF-8"/> > > > <title>Community Programs</title> > > > <style> > > body { font-family: Arial, sans-serif; } > > #map_canvas { height: 600px; width:700px; } > > </style> > > > <script type="text/javascript" src="http://maps.google.com/maps/api/js? > > sensor=false"></script> > > <script type="text/javascript" src="http://www.google.com/jsapi";></ > > script> > > > <script type="text/javascript" id="script"> > > google.load('visualization', '1'); > > > var tableid = 2177811; > > var map; > > var lastWindow; > > > function initialize() { > > map = new google.maps.Map(document.getElementById('map_canvas'), { > > center: new google.maps.LatLng(34.30941257937057, > > -118.1689453125), > > zoom: 9, > > mapTypeId: google.maps.MapTypeId.ROADMAP > > }); > > > setData(); > > > } > > > function setData() { > > // Create a Chart Tools query to send to Fusion Tables > > var query = new google.visualization.Query( > > 'http://www.google.com/fusiontables/gvizdata?tq='+ > > encodeURIComponent("SELECT 'geometry' FROM 2177811") > > ); > > query.send(getData); > > > } > > > // Define callback function, this is called when the results are > > returned > > function getData(response) { > > > // For more information on the response object, see the > > documentation > > //http://code.google.com/apis/visualization/documentation/reference.htm... > > var numRows = response.getDataTable().getNumberOfRows(); > > > for (i = 0; i < numRows; i++) { > > var string_coordinates = response.getDataTable().getValue(i, 1); > > var split_coordinates = string_coordinates.split(","); > > var lat = split_coordinates[0]; > > var lng = split_coordinates[1]; > > var coordinate = new google.maps.LatLng(lat, lng); > > > // Get row data for the info window > > var name = response.getDataTable().getValue(i, 0); > > > createMarker(name); > > } > > > } > > > function createMarker(name) { > > // Create the marker > > var marker = new google.maps.Marker({ > > map: map, > > position: coordinate, > > icon: new google.maps.MarkerImage("http://www.advocacy.ucla.edu/ > > Maps/communitybanners/banner-with-url.use-c.png") > > }); > > > google.maps.event.addListener(marker, 'click', function(event) { > > if (lastWindow) { > > lastWindow.close(); > > } else { > > lastWindow = new google.maps.InfoWindow(); > > } > > > // Set the position and contents of the info window, and open the > > window > > lastWindow.setPosition(coordinate); > > lastWindow.setContent(name); > > lastWindow.open(map); > > });} > > > </script> > > > </head> > > <body onload="initialize()"> > > <div id="map_canvas"></div> > > > <div id="code"></div> > > <script type="text/javascript" src="script/script.js"></script> > > </body> > > </html> -- You received this message because you are subscribed to the Google Groups "Google Maps JavaScript API v3" group. To post to this group, send email to google-maps-js-api-v3@googlegroups.com. To unsubscribe from this group, send email to google-maps-js-api-v3+unsubscr...@googlegroups.com. For more options, visit this group at http://groups.google.com/group/google-maps-js-api-v3?hl=en.
