Hi All, I am developing Google MAP on my local machine so I can't give you the link of the site.
I have added markers from XML file and also I populate sidebar entries from the same XML. When I click on any marker,it displays the info. window.I want it to work on the respective sidebar item. Here is my code, <%@ Page Language="C#" AutoEventWireup="true" CodeFile="TestXMLSqlMap.aspx.cs" Inherits="TestXMLSqlMap" %> <%@ Outputcache Location="None"%> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd";> <html xmlns="http://www.w3.org/1999/xhtml";> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> <title>Google Maps JavaScript API Example</title> <script src="http://maps.google.com/maps?file=api&v=2&key=abcdefg"; type="text/javascript"></script> <script type="text/javascript"> //<![CDATA[ var map = null; var gmarkers = []; function load() { if (GBrowserIsCompatible()) { var i = 0; // this variable will collect the html which will eventually be placed in the side_bar var side_bar_html = ""; // arrays to hold copies of the markers and html used by the side_bar // because the function closure trick doesnt work there var icon = new GIcon(); icon.image = "http://labs.google.com/ridefinder/images/ mm_20_red.png"; icon.shadow = "http://labs.google.com/ridefinder/images/ mm_20_shadow.png"; icon.iconSize = new GSize(12, 20); icon.shadowSize = new GSize(22, 20); icon.iconAnchor = new GPoint(6, 20); icon.infoWindowAnchor = new GPoint(5, 1); iconblue = new GIcon(icon,"http://labs.google.com/ridefinder/ images/mm_20_blue.png"); icongreen = new GIcon(icon,"http://labs.google.com/ ridefinder/images/mm_20_green.png"); iconyellow = new GIcon(icon,"http://labs.google.com/ ridefinder/images/mm_20_yellow.png"); // Create the map // Make sure this element has the same ID as your div map = new GMap2(document.getElementById("googlemap")); // Add controls for moving and zooming the map. Use GSmallMapControl for small maps map.addControl(new GLargeMapControl()); // Add controls for switching between regular and satellite views map.addControl(new GMapTypeControl()); // Set the starting position and zoom level when the map loads map.setCenter(new GLatLng(39.010647, -100.502929), 4); // Read the data from XML var request = GXmlHttp.create(); // Open the XML file request.open("GET", "ShipmentStat.xml", true); request.onreadystatechange = function() { if (request.readyState == 4) { var xmlDoc = request.responseXML; // Obtain the array of markers and loop through it var markers = xmlDoc.documentElement.getElementsByTagName ("_x0040_Shipments"); for (var i = 0; i < markers.length; i++) { // Obtain the attribues of each marker //For Origin Marker var lat = parseFloat(markers[i].getAttribute("Latitude")); var lng = parseFloat(markers[i].getAttribute("Longitude")); var point = new GLatLng(lat,lng); ///For Destination Marker var lat_new = parseFloat(markers[i].getAttribute ("_x0020_Latitude")); var lng_new = parseFloat(markers[i].getAttribute ("_x0020_Longitude")); var point_new = new GLatLng(lat_new,lng_new); var carrier = markers[i].getAttribute("Carrier"); var status = markers[i].getAttribute("Status"); var orgaddress = markers[i].getAttribute("Origin_x0020_Address"); var destaddress = markers[i].getAttribute ("Destination_x0020_Address"); var city = markers[i].getAttribute("Status"); var pickdate = markers[i].getAttribute ("Pickup_x0020_Date_x002F_Time"); var deldate = markers[i].getAttribute ("Delivery_x0020_Date_x002F_Time"); var equipment = markers[i].getAttribute("Equipment"); var num1=""; // Call the function to create the marker var marker = createMarker (point,carrier,status,orgaddress,destaddress,city,pickdate,deldate,equipment,num1=1,icon); var marker_new = createMarker_new (point_new,carrier,status,orgaddress,destaddress,city,pickdate,deldate,equipment,num1=2,iconblue); gmarkers.push(marker); map.addOverlay(marker); map.addOverlay(marker_new); // put the assembled side_bar_html contents into the side_bar div document.getElementById("side_bar").innerHTML = side_bar_html; } } } request.send(null); // Function to create the marker and set up the event window function createMarker (point,carrier,status,orgaddress,destaddress,city,pickdate,deldate,equipment,number) { // Create the HTML text based on the values passed in from XML var markerhtml = ""; if (carrier != "") markerhtml += "<b>" + carrier + "</b><br>"; //markerhtml += address + "<br>" ; if(orgaddress != "") markerhtml += "Origin Address: " + "<b>" + orgaddress + "</b><br>"; //if(orgaddress != "") markerhtml += "Origin Address: "+ orgaddress + "<br>" ; if(destaddress != "") markerhtml += "Destination Address: " + destaddress + "<br>" ; if(pickdate != "") markerhtml += "Pick-Up Date: " + pickdate + "<br>" ; if(deldate != "") markerhtml += "Delivery Date: " + deldate + "<br>" ; if (status != "") markerhtml += "Status: " + status + "<br>"; if (equipment != "") markerhtml += "Equipment: " + equipment + "<br>"; markerhtml += " <a href=\"www.iconnectgroup.com\">Show BOL<\/a> "; //if (url != "") markerhtml += "<a href=\"" + url + "\">" + url + "</a>"; // Create the map marker //var marker = new GMarker(point); var marker = new GMarker(point, {icon:icon}); // Add a click event to each marker which will open the HTML window GEvent.addListener(marker, "click", function() { marker.openInfoWindowHtml(markerhtml); }); gmarkers.push(marker); i++; // save the info we need to use later for the side_bar // add a line to the side_bar html side_bar_html += '<a href="javascript:myclick(' + (gmarkers.length-1) + ')">' + carrier + '<\/a><br>'; return marker; } // This function picks up the click and opens the corresponding info window function myclick(i) { GEvent.trigger(gmarkers[i], "click"); } function createMarker_new (point,carrier,status,orgaddress,destaddress,city,pickdate,deldate,equipment,number,icon) { // Create the HTML text based on the values passed in from XML var markerhtml = ""; if (carrier != "") markerhtml += "<b>" + carrier + "</b><br>"; //markerhtml += address + "<br>" ; //if(orgaddress != "") markerhtml += "Origin Address: " + orgaddress + "</b><br>"; if(orgaddress != "") markerhtml += "Origin Address: "+ orgaddress + "<br>" ; if(destaddress != "") markerhtml += "Destination Address: " + "<b>" + destaddress + "</b><br>" ; if(pickdate != "") markerhtml += "Pick-Up Date: " + pickdate + "<br>" ; if(deldate != "") markerhtml += "Delivery Date: " + deldate + "<br>" ; if (status != "") markerhtml += "Status: " + status + "<br>"; if (equipment != "") markerhtml += "Equipment: " + equipment + "<br>"; markerhtml += " <a href=\"www.iconnectgroup.com\">Show BOL<\/a> "; //if (url != "") markerhtml += "<a href=\"" + url + "\">" + url + "</a>"; // Create the map marker //var marker = new GMarker(point); var marker = new GMarker(point, {icon:icon}); // Add a click event to each marker which will open the HTML window GEvent.addListener(marker, "click", function() { marker.openInfoWindowHtml(markerhtml); }); i++; // save the info we need to use later for the side_bar gmarkers.push(marker); // add a line to the side_bar html side_bar_html += '<a href="javascript:myclick(' + (gmarkers.length-1) + ')">' + carrier + '<\/a><br>'; return marker; } } // Javascript alert for older browsers where Google Maps isn't supported else { alert("Sorry, the Google Maps API is not compatible with this browser"); } GEvent.addListener(map, "moveend", function() { var center = map.getCenter(); document.getElementById("message").innerHTML = center.toString(); }); } //]]> </script></head> <body onload="load()" onunload="GUnload()"> <form id="form1" runat="server"> <table border=1> <tr> <td> <div id="googlemap" style="width: 750px; height: 555px"></ div> </td> <td width = 150 valign="top" style="text-decoration: underline; color: #4444ff;"> <div id="side_bar"></div> </td> </tr> <tr> <td colspan="2"> </td> </tr> <tr> <td> <div id="message"></div> </td> <td width = 150 valign="top" style="text-decoration: underline; color: #4444ff;"> <asp:Button ID="Button1" runat="server" onclick="Button1_Click" Text="Button" /> </td> </tr> </table> <%--<div id="googlemap" style="width: 750px; height: 555px"></div>-- %> <%-- <div id="side_bar"></div>--%> </form> </body> </html> Please help me regarding this. Thanks in advance. --~--~---------~--~----~------------~-------~--~----~ You received this message because you are subscribed to the Google Groups "Google Maps API" group. To post to this group, send email to [email protected] To unsubscribe from this group, send email to [email protected] For more options, visit this group at http://groups.google.com/group/Google-Maps-API?hl=en -~----------~----~----~----~------~----~------~--~---
