Hello, I am really new to making custom maps with the API and I have couple questions.
I'm currently have a problem trying to get a map that has the quicktips with tabs, directions on one of those tabs and custom markers for different areas. Currently I have the tabs and directions working but I can't figure out how to get more than one custom icon. Not really sure how to go about this. Any help would be awesome! Here is my code: <code> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:// www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml";> <head> <link rel="stylesheet" type="text/css" href="gm.css"/> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>UM Flint Map</title> <script src="http://maps.google.com/maps? file=api&v=2&key=ABQIAAAAHdcwAqbjyMw6oJiELCxSJRQr-jT7DQuqy8- fKvMDA4nmeTCJZRScSBwmES9dnEfDcXlA1zkZhjlS8Q" type="text/javascript" type="text/javascript"></script> </head> <!-- you can use tables or divs for the overall layout --> <table> <div id="map"> </div> <h2> Academic Buildings</h2> <div id="sidebar"> </div> </table> <noscript> <b>JavaScript must be enabled in order for you to use Google Maps.</ b> However, it seems JavaScript is either disabled or not supported by your browser. To view Google Maps, enable JavaScript by changing your browser options, and then try again.</noscript> <script type="text/javascript"> //<![CDATA[ if (GBrowserIsCompatible()) { // this variable will collect the html which will eventually be placed in the sidebar var sidebar_html = ""; // arrays to hold copies of the markers and html used by the sidebar // because the function closure trick doesnt work there var gmarkers = []; // global variables var map; var request; var bounds = new GLatLngBounds(); // Create our custom icons // This icon is a different shape, so we need our own settings var icons = new Array(); icons["blue"] = new GIcon(); icons["blue"].image = "building.png"; icons["blue"].shadow = "shadow_circle30.png"; icons["blue"].iconSize = new GSize(30.0, 30.0); icons["blue"].shadowSize = new GSize(46.0, 30.0); icons["blue"].iconAnchor = new GPoint(15.0, 15.0); icons["blue"].infoWindowAnchor = new GPoint(15.0, 15.0); function get_icon(iconColor) { if ((typeof(iconColor)=="undefined") || (iconColor==null)) { // iconColor = "blue"; return; } if (!icons[iconColor]) { icons[iconColor] = new GIcon(icons["blue"]); icons[iconColor].image = "marker_"+ iconColor +".png"; } return icons[iconColor]; } // functions that open the directions forms function tohere(i) { var tabLabel = 'Directions'; var numTabs = gmarkers[i].tabs.length; var divWidth = numTabs * 88; if (numTabs < 3) divWidth = 3*88; // The info window version with the "to here" form open var tabHtml = '<div style="width:'+divWidth+'px">'+ '<br>Directions: <b>To here</b> - <a href="javascript:fromhere(' + i + ')">From here</a>' + '<br>Start address:<form action="http://maps.google.com/ maps" method="get" target="_blank">' + '<input type="text" size="40" maxlength="40" name="saddr" id="saddr" value="" /><br>' + '<input value="Get Directions" type="submit"/>' + '<input type="hidden" name="daddr" value="' + gmarkers [i].getPoint().lat() + ',' + gmarkers[i].getPoint().lng() + // "(" + name + ")" + '"/></div>'; gmarkers[i].tabs[numTabs-1]= new GInfoWindowTab (tabLabel,tabHtml); gmarkers[i].openInfoWindowTabsHtml(gmarkers[i].tabs, {selectedTab:numTabs-1}); } function fromhere(i) { var tabLabel = 'Directions'; var numTabs = gmarkers[i].tabs.length; var divWidth = numTabs * 88; if (numTabs < 3) divWidth = 3*88; // The info window version with the "from here" form open var tabHtml = '<div style="width:'+divWidth+'px">'+ '<br>Directions: <a href="javascript:tohere(' + i + ')">To here</a> - <b>From here</b>' + '<br>End address:<form action="http://maps.google.com/maps"; method="get"" target="_blank">' + '<input type="text" size="40" maxlength="40" name="daddr" id="daddr" value="" /><br>' + '<input value="Get Directions" type="submit"/>' + '<input type="hidden" name="saddr" value="' + gmarkers [i].getPoint().lat() + ',' + gmarkers[i].getPoint().lng() + // "(" + name + ")" + '"/></div>'; gmarkers[i].tabs[numTabs-1]= new GInfoWindowTab (tabLabel,tabHtml); gmarkers[i].openInfoWindowTabsHtml(gmarkers[i].tabs, {selectedTab:numTabs-1}); } // ================================================== // A function to create a tabbed marker and set up the event window // This version accepts a variable number of tabs, passed in the arrays htmls[] and labels[] function createTabbedMarker(point,label,tabs,icon) { var marker; if (icon) { marker = new GMarker(point,get_icon(icon)); } else { marker = new GMarker(point); } var marker_num = gmarkers.length; marker.marker_num = marker_num; marker.tabs = tabs; gmarkers[marker_num] = marker; GEvent.addListener(gmarkers[marker_num], "click", function() { marker.openInfoWindowTabsHtml(gmarkers[marker_num].tabs); }); // add a line to the sidebar html sidebar_html += '<li><a href="javascript:myclick(' + marker_num + ')">' + label + '</a></li>'; return marker; } // ================================================== // This function picks up the click and opens the corresponding info window function myclick(i) { GEvent.trigger(gmarkers[i], "click"); } // create the map // var map = new GMap2(document.getElementById("map")); var map = new GMap2(document.getElementById("map")); map.addControl(new GLargeMapControl()); map.addControl(new GMapTypeControl()); map.setCenter(new GLatLng( 43.019812,-83.689524),17); // Read the data from gm.xml var request = GXmlHttp.create(); var filename = "gm.xml"; request.open("GET", filename, true); request.onreadystatechange = processTabbedXML; request.send(null); } else { alert("Sorry, the Google Maps API is not compatible with this browser"); } function processTabbedXML() { if (request.readyState == 4) { if ((request.status != 200) && (request.status != 304)) { alert("file not found: "+filename); return; } // var xmlDoc = request.responseXML; var xmlDoc = GXml.parse(request.responseText); // obtain the array of markers and loop through it var markers = xmlDoc.documentElement.getElementsByTagName ("marker"); // alert("processing "+markers.length+" markers"); // map.clearOverlays(); // bug in clearOverlays for (var i=0; i<gmarkers.length; i++) { map.removeOverlay(gmarkers[i]); } gmarkers = new Array(); for (var i = 0; i < markers.length; i++) { // obtain the attributes of each marker var lat = parseFloat(markers[i].getAttribute("lat")); var lng = parseFloat(markers[i].getAttribute("lng")); var label = markers[i].getAttribute("label"); var icon = markers[i].getAttribute("icon"); // alert("point["+i+"] label="+label+":("+lat+", "+lng+")"); if (isNaN(lat) || isNaN(lng)) { alert("bad point "+i); continue; } var point = new GLatLng(lat,lng); // get the tab info tabInfo = markers[i].getElementsByTagName("tab"); tabs = new Array(); if (tabInfo.length > 0) { // alert("processing "+tabInfo.length+" tabs"); for (var j = 0; j < tabInfo.length; j++) { var tabLabel = GXml.value(tabInfo [j].getElementsByTagName("label")[0]); var tabHtml = GXml.value(tabInfo[j].getElementsByTagName ("contents")[0]); // alert("point["+i+"] tab["+j+"] label="+tabLabel+", contents="+tabHtml); if ((j==0) && (tabInfo.length > 2)){ // adjust the width so that the info window is large enough for this many tabs tabHtml = '<div style="width:'+tabInfo.length*88+'px">' + tabHtml + '</div>'; } tabs.push(new GInfoWindowTab(tabLabel,tabHtml)); } } else { // alert("no tabs point "+i); var tabLabel = "Nothing"; var tabHtml = markers[i].getAttribute("html"); tabs.push(new GInfoWindowTab(tabLabel,tabHtml)); } if (!markers[i].getAttribute("nodirections") || (markers [i].getAttribute("nodirections").toLowerCase() == "no")) { // add directions tab var tabLabel = "Directions"; var tabHtml = '<div style="width:'+(tabs.length+1) *88+'px">'+'<br>Directions: <a href="javascript:tohere('+i+')">To here</a> - <a href="javascript:fromhere('+i+')">From here</a></div>'; tabs.push(new GInfoWindowTab(tabLabel,tabHtml)); } // create the marker var marker = createTabbedMarker(point,label,tabs, icon); bounds.extend(point); map.addOverlay(marker); } // put the assembled sidebar_html contents into the sidebar div document.getElementById("sidebar").innerHTML = sidebar_html; sidebar_html = ""; } } function getXMLfile() { // Read the data from example.xml request = GXmlHttp.create(); filename = document.MyForm.filename.value if (filename.length == 0) { alert("Please enter a filename!"); return false; } // filename = "example.xml" request.open("GET", filename, true); request.onreadystatechange = processTabbedXML; request.send(null); return false; } function processXMLfile() { if (request.readyState == 4) { if ((request.status == 200) || (request.status == 304)) { var xmlDoc = request.responseXML; if (xmlDoc.documentElement) { // obtain the array of markers and loop through it var markers = xmlDoc.documentElement.getElementsByTagName ("marker"); map.clearOverlays(); for (var i = 0; i < markers.length; i++) { // obtain the attribues of each marker var lat = parseFloat(markers[i].getAttribute("lat")); var lng = parseFloat(markers[i].getAttribute("lng")); // var point = new GPoint(lng,lat); var point = new GLatLng(lat,lng); var html = markers[i].getAttribute("html"); var label = markers[i].getAttribute("label"); var icon = markers[i].getAttribute("icon"); // create the marker var marker = createMarker(point,label,html,icon); map.addOverlay(marker); } } else { alert("invalid xml file:"+filename); } } else { alert("file not found:"+filename); } } } //]]> </script> </body> </html> </code> --~--~---------~--~----~------------~-------~--~----~ 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 -~----------~----~----~----~------~----~------~--~---
