Hi, I'm new to programming never mind Google Maps. I'm going through a book that gives an example of making a map with Google Mapplets. However, I would like to try and write the file with the Google Maps API. The book is "Google Maps Mashups with Google Mapplets".
I have read the link on the differences between Mapplets and Standard Google Maps API http://code.google.com/apis/maps/documentation/mapplets/guide.html#Differences but I am still unable to get it working. Any help would be great. The code for the file is below. Thanks. <?xml version="1.0" encoding="UTF-8" ?> <Module> <ModulePrefs title="Tourfilter Concerts" description="Mapping Tourfilter Concerts" author="Your Name Goes Here" author_email="Your Email Goes Here" height="450"> </ModulePrefs> <Content type="html"> <![CDATA[ <p> <select onchange="loadData(this.options[this.selectedIndex].value);"> <option value="">-- Select a City --</option> <option value="albuquerque">Albuquerque</option> <option value="asheville">Asheville</option> <option value="atlanta">Atlanta</option> <option value="austin">Austin</option> <option value="baltimore">Baltimore</option> <option value="boulder">Boulder</option> <option value="buffalo">Buffalo</option> <option value="boston">Boston</option> <option value="cincinnati">Cincinnati</option> <option value="cleveland">Cleveland</option> <option value="columbus">Columbus</option> <option value="chicago">Chicago</option> <option value="dallas">Dallas</option> <option value="denver">Denver</option> <option value="dublin">Dublin</option> </select> </p> <div class="status">Status: <span id="status">Nothing loaded yet. Select from the city list above.</span></div> <p id="content"></p> <script> var map = new GMap2(); // array of our markers - we'll initialize below var markers = null; function handleFetchContent (response, city) { // make sure that we fetched valid XML data if (response == null || typeof(response) != "object" || response.firstChild == null) { _gel("status").innerHTML = "Failed to load valid XML data"; return; } var markerData = response.getElementsByTagName("markers"); // make sure we have at least one marker in the XML if (markerData.length == 0) { _gel("status").innerHTML = "Sorry, we don't have any concert data at this time"; return; } // parse the concert data from the response var concertData = response.getElementsByTagName("marker"); // make sure we have at least one marker in the XML if (concertData.length == 0) { _gel("status").innerHTML = "Sorry, we don't have any concert data at this time"; return; } _gel("status").innerHTML = "Done loading concert data...now rendering the map"; var displayHTML = ""; // create a new/fresh bounds object var bounds = new GLatLngBounds(); // remove all marker Events that we've created cleanupMarkers(); // re-initialize the markers array markers = new Array(); var displayDate = ""; for (var i = 0; i < concertData.length; i++) { var concert = concertData[i]; var band = concert.getAttribute("band"); var venue = concert.getAttribute("venue"); var date = concert.getAttribute("date"); var lat = concert.getAttribute("lat"); var lng = concert.getAttribute("lng"); // create a marker and add it to the map var point = new GLatLng(lat, lng); var marker = createMarker(point, city, band, venue, date); map.addOverlay(marker); // add marker to our array so that we can track them markers[i] = marker; // add the point to our Bounds object bounds.extend(point); if (date != displayDate) { displayHTML += "<div class='date'>" + date + "</div>"; displayDate = date; } // add our band/venue to the Mapplet display in the left-hand panel // and show the marker info window when we click on the band/venue link displayHTML += "<div class='listing'>"; displayHTML += " <a href='#' onclick='clickMarker(" + i + ");'>" + band + "</a>"; displayHTML += " <span class='venue'>" + venue + "</span>"; displayHTML += "</div>"; } // find the proper zoom level for the bounds // and center the map so that all of the markers are visible map.getBoundsZoomLevelAsync(bounds, function(level) { map.setCenter(bounds.getCenter()); map.setZoom(level); // don't render the list until we've centered the map _gel("content").innerHTML = displayHTML; _gel("status").innerHTML = "Done loading concert data"; }); // resize the mapplet window height _IG_AdjustIFrameHeight(); } function loadData(city) { // make sure a city has been selected if (city == "") return; var url = "http://www.iborough.co.uk/xml/"; + city + ".xml"; // update the status field and clear out anything we have in 'content' _gel("status").innerHTML = "loading..."; _gel("content").innerHTML = ""; // fetch the XML data from the url _IG_FetchXmlContent(url, _IG_Callback(handleFetchContent, city)); } function createMarker(point, city, band, venue, date) { // create link back to Tourfilter that will go in the info window var tourfilter_url = "http://tourfilter.com/"; + city + "/" + encodeURIComponent(band); // create the marker and add the onclick event listener var marker = new GMarker(point, {title: band + " - " + venue}); GEvent.addListener(marker, "click", function() { // band var html = "<div>"; html += " <span style='font-size: 18px; color: #900'>" + band + "</ span> "; html += "</div>"; // venue html += "<div>"; html += " <span style='font-size: 14px; color: #888'>" + date + " - </span>"; html += " <span style='margin-top: 5px; font-size: 14px; color: #888'>" + venue + "</span>"; html += "</div>"; // footer html += "<div style='margin-top: 5px; font-size: 10px; color: #888'>"; html += " <a style='color: #888;' href='" + tourfilter_url + "' target='_blank'> tourftiler.com</a>" html += "</div>"; marker.openInfoWindowHtml(html, {disableGoogleLinks:true}); }); return marker; } // remove all marker Event Listeners and markers from the map function cleanupMarkers() { if (markers == null) return; for (var i = 0; i < markers.length; i++) { var marker = markers[i]; GEvent.clearListeners(marker, "click"); } if (map) map.clearOverlays(); } // function called when we want to simulate a marker click function clickMarker(index) { GEvent.trigger(markers[index], "click"); } </script> ]]> </Content> </Module> --~--~---------~--~----~------------~-------~--~----~ 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 -~----------~----~----~----~------~----~------~--~---
