i have google map html page. works fine in development under localhost when try put in online, google undefined in infobox.js file, line:
this.extend(infobubble, google.maps.overlayview);
i have api key loaded , it's called before load infobox.js file. added callback=initialize see if work, doesn't work or without it. here code html file:
<!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" xmlns:v="urn:schemas-microsoft-com:vml"> <head> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> <title>activities</title> <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=aizasyavvx45qud8ozw5sjzw-lk_8qvvsxdwi2y&sensor=false""></script> <script type="text/javascript" src="googlemaps/scripts/downloadxml.js"></script> <script type="text/javascript" src="googlemaps/scripts/infobubble_tabs.js"></script> <style type="text/css"> html, body { height: 100%; } .style1 { width: 758px; } .style2 { width: 349px; } #side_bar { height: 550px; width: 349px; overflow:scroll; } </style> <script type="text/javascript"> //<![cdata[ // variable collect html placed in side_bar var side_bar_html = ""; var gmarkers = []; var gicons = []; var map = null; var infobubble = new infobubble({ maxwidth: 300 }); //defines icon if there none stated gicons["red"] = new google.maps.markerimage("http://maps.gstatic.com/mapfiles/ridefinder-images/mm_20_red.png", new google.maps.size(20, 34), new google.maps.point(0, 0), new google.maps.point(9, 9)); // marker sizes expressed size of x,y // origin of image (0,0) located // in top left of image. // origins, anchor positions , coordinates of marker // increase in x direction right , in // y direction down. var iconimage = new google.maps.markerimage('http://maps.gstatic.com/mapfiles/ridefinder-images/mm_20_red.png', new google.maps.size(20, 34), new google.maps.point(0, 0), new google.maps.point(9, 9)); var iconshadow = new google.maps.markerimage('http://www.google.com/mapfiles/shadow50.png', new google.maps.size(37, 34), new google.maps.point(0, 0), new google.maps.point(9, 9)); // shapes define clickable region of icon. // type defines html <area> element 'poly' traces out polygon series of x,y points. final coordinate closes //the poly connecting first coordinate. var iconshape = { coord: [9, 0, 6, 1, 4, 2, 2, 4, 0, 8, 0, 12, 1, 14, 2, 16, 5, 19, 7, 23, 8, 26, 9, 30, 9, 34, 11, 34, 11, 30, 12, 26, 13, 24, 14, 21, 16, 18, 18, 16, 20, 12, 20, 8, 18, 4, 16, 2, 15, 1, 13, 0], type: 'poly' }; //determines icon based on category //if no icon defined function getmarkerimage(iconcolor) { if ((typeof (iconcolor) == "undefined") || (iconcolor == null)) { iconcolor = "red"; } if (!gicons[iconcolor]) { gicons[iconcolor] = new google.maps.markerimage(iconcolor, new google.maps.size(20, 34), new google.maps.point(0, 0), new google.maps.point(9, 9)); } return gicons[iconcolor]; } function category2icon(category) { var color = "red"; switch (category) { case "hike": color = "googlemaps/images/hikingicon.jpg"; break; case "kml": color = "googlemaps/images/kml.gif"; break; case "camping": color = "googlemaps/images/camping.gif"; break; case "statepark": color = "googlemaps/images/statepark.jpg"; break; case "nationalpark": color = "googlemaps/images/nationalpark_icon.png"; break; case "pointsofinterest": color = "googlemaps/images/poi.png"; break; case "countypark": color = "googlemaps/images/countypark_icon.png"; break; case "biking": color = "googlemaps/images/bike_icon.jpg"; break; case "fishwildlifeservice": color = "googlemaps/images/fishwildlife_icon.gif"; break; case "kayak": color = "googlemaps/images/kayaking.png"; break; case "shelter": color = "googlemaps/images/shelter_icon.png"; break; case "parking": color = "googlemaps/images/parking_lot_icon.png"; break; default: color = "red"; break; } return color; } gicons["hike"] = getmarkerimage(category2icon("hike")); gicons["kml"] = getmarkerimage(category2icon("kml")); gicons["camping"] = getmarkerimage(category2icon("camping")); gicons["statepark"] = getmarkerimage(category2icon("statepark")); gicons["nationalpark"] = getmarkerimage(category2icon("nationalpark")); gicons["pointsofinterest"] = getmarkerimage(category2icon("pointsofinterest")); gicons["countypark"] = getmarkerimage(category2icon("countypark")); gicons["biking"] = getmarkerimage(category2icon("biking")); gicons["fishwildlifeservice"] = getmarkerimage(category2icon("fishwildlifeservice")); gicons["kayak"] = getmarkerimage(category2icon("kayak")); gicons["shelter"] = getmarkerimage(category2icon("shelter")); gicons["parking"] = getmarkerimage(category2icon("parking")); // function create marker , set event window function createmarker(latlng, name, url, detail_tab, notes_tab, map_tab, hiking_detail_tab, camping_detail_tab, category, state) { var contentstring_detail = detail_tab; var contentstring_notes = notes_tab; var contentstring_maps = map_tab; var contentstring_hiking_detail = hiking_detail_tab; var contentstring_camping_detail = camping_detail_tab; var marker = new google.maps.marker({ position: latlng, icon: gicons[category], shadow: iconshadow, map: map, title: name, zindex: math.round(latlng.lat() * -100000) << 5 }); // === store category , name info marker properties === marker.mycategory = category; marker.mystate = state; marker.myname = name; gmarkers.push(marker); // open info bubbles google.maps.event.addlistener(marker, 'click', function () { infobubble.open(map, marker); infobubble.removetab(4); infobubble.removetab(3); infobubble.removetab(2); infobubble.removetab(1); infobubble.removetab(0); if (category == "kml") { window.open("" + url); } if (!category == "kml") { infobubble.addtab('details', contentstring_detail); } if (!notes_tab == "") { infobubble.addtab('notes', contentstring_notes); } if (!map_tab == "") { switch (category) { case "camping": infobubble.addtab('campsite map', contentstring_maps); break; case "hike": infobubble.addtab('trail map', contentstring_maps); break; } } if (!hiking_detail_tab == "") { infobubble.addtab('trail notes', contentstring_hiking_detail); } if (!camping_detail_tab == "") { infobubble.addtab('campsite notes', contentstring_camping_detail); } }); } // == shows markers of particular category, , ensures checkbox checked == function show(category) { (var = 0; < gmarkers.length; i++) { if (gmarkers[i].mycategory == category) { gmarkers[i].setvisible(true); } } // == check checkbox == document.getelementbyid(category + "box").checked = true; } // == hides markers of particular category, , ensures checkbox cleared == function hide(category) { (var = 0; < gmarkers.length; i++) { if (gmarkers[i].mycategory == category) { gmarkers[i].setvisible(false); } } // == clear checkbox == document.getelementbyid(category + "box").checked = false; // == close info window, in case open on marker hid infobubble.close(); } // == checkbox has been clicked == function boxclick(box, category) { if (box.checked) { show(category); } else { hide(category); } // == rebuild side bar makesidebar(); } function myclick(i) { google.maps.event.trigger(gmarkers[i], "click"); } // == rebuilds sidebar match markers displayed == function makesidebar() { var html = ""; (var = 0; < gmarkers.length; i++) { if (gmarkers[i].getvisible()) { html += '<a href="javascript:myclick(' + + ')">' + gmarkers[i].myname + '<\/a><br>'; } } document.getelementbyid("side_bar").innerhtml = html; } function initialize() { var myoptions = { zoom: 8, center: new google.maps.latlng(39.364032, -77.182159), maptypeid: google.maps.maptypeid.roadmap } map = new google.maps.map(document.getelementbyid("map"), myoptions); // closes open bubbles before opening new 1 google.maps.event.addlistener(map, 'click', function () { infobubble.close(); }); //downloads data xml file // reads data creates each tab downloadurl("googlemaps/categories.xml", function (doc) { var xml = xmlparse(doc); var markers = xml.documentelement.getelementsbytagname("marker"); (var = 0; < markers.length; i++) { // obtain attribues of each marker var lat = parsefloat(markers[i].getattribute("lat")); var lng = parsefloat(markers[i].getattribute("lng")); var point = new google.maps.latlng(lat, lng); var address = markers[i].getattribute("address"); var city = markers[i].getattribute("city"); var state = markers[i].getattribute("state"); var zip = markers[i].getattribute("zip"); var name = markers[i].getattribute("name"); var notes = markers[i].getattribute("notes"); var url = markers[i].getattribute("url"); var hike_distance = markers[i].getattribute("hike_distance"); var hike_trail_skill_level = markers[i].getattribute("hike_trail_skill_level"); var hike_points_of_interest = markers[i].getattribute("hike_points_of_interest"); var camping_amenities = markers[i].getattribute("camping_amenities"); var camping_best_sites = markers[i].getattribute("camping_best_sites"); var camping_notes = markers[i].getattribute("camping_notes"); var image = markers[i].getattribute("image"); var category = markers[i].getattribute("category"); //creates data detail tab var detail_tab = ""; detail_tab += "<b>" + name + "<\/b><p>"; detail_tab += address + "</br>"; detail_tab += city + ", " + state + " " + zip + "</br>"; detail_tab += '<br><a target="_blank" href="' + url + '">' + url + '</a>' + "</br>"; //creates data notes tab var notes_tab = notes; //creates data maps tab var map_tab = ""; if (image) { map_tab += '<br><a target="_blank" href="' + image + '">' + image + '</a>' + "</br>"; } //creates data hiking detail tab var hiking_detail_tab = ""; if (hike_distance) { hiking_detail_tab += "<b>trail distance: </b>" + hike_distance + " miles</br>"; hiking_detail_tab += "<b>trail skill level: </b>" + hike_trail_skill_level + "</br>"; hiking_detail_tab += "<b>points of interest: </b>" + hike_points_of_interest + "</br>"; } //creates data camping detail tab var camping_detail_tab = ""; if (camping_notes) { camping_detail_tab += "<b>amenities: </b>" + camping_amenities + "</br>"; camping_detail_tab += "<b>best sites: </b>" + camping_best_sites + "</br>"; camping_detail_tab += "<b>notes: </b>" + camping_notes + "</br>"; } // var kml_tab = ""; // if (category=="kml) { // create marker var marker = createmarker(point, name, url, detail_tab, notes_tab, map_tab, hiking_detail_tab, camping_detail_tab, category); } // == show or hide categories == show("hike"); show("kml"); hide("camping"); hide("statepark"); hide("nationalpark"); hide("pointsofinterest"); hide("countypark"); hide("biking"); hide("fishwildlifeservice"); hide("kayak"); hide("shelter"); hide("parking"); // == create initial sidebar == makesidebar(); }); } //]]> </script> </head> <body style="margin:0px; padding:0px;" onload="initialize()"> <table border="1" > <tr> <td class="style1"> <div id="map" style="width:978px; height: 596px"></div> </td> <td valign="top" style="text-decoration: underline; color: #4444ff;" class="style2"> <h4>to view topo map, click map in top left corner , select terrain drop down menu</h4> <div id="side_bar"></div> </td> </tr> </table> <form action="#"> hiking: <input type="checkbox" id="hikebox" onclick="boxclick(this,'hike')" /> full trail map: <input type="checkbox" id="kmlbox" onclick="boxclick(this,'kml')" /> trail shelters: <input type="checkbox" id="shelterbox" onclick="boxclick(this,'shelter')" /> trail parking: <input type="checkbox" id="parkingbox" onclick="boxclick(this,'parking')" /> camping: <input type="checkbox" id="campingbox" onclick="boxclick(this,'camping')" /> biking: <input type="checkbox" id="bikingbox" onclick="boxclick(this,'biking')" /> kayaking: <input type="checkbox" id="kayakbox" onclick="boxclick(this,'kayak')" /> <br /> state parks: <input type="checkbox" id="stateparkbox" onclick="boxclick(this,'statepark')" /> national parks: <input type="checkbox" id="nationalparkbox" onclick="boxclick(this,'nationalpark')" /> county park: <input type="checkbox" id="countyparkbox" onclick="boxclick(this,'countypark')" /> <br /> points of interest: <input type="checkbox" id="pointsofinterestbox" onclick="boxclick(this,'pointsofinterest')" /> fish , wildlife service: <input type="checkbox" id="fishwildlifeservicebox" onclick="boxclick(this,'fishwildlifeservice')" /> <br /> </form> <noscript><b>javascript must enabled in order use google maps.</b> however, seems javascript either disabled or not supported browser. view google maps, enable javascript changing browser options, , try again. </noscript> </body> </html>
remove callback-parameter. when use callback-parameter asynchronous version of maps-api loaded.
you can't use asynchronous version of api here because infobox.js works when maps-api has been loaded(what may happen asynchronous version, must not). in special case api never loaded, because body-element still unknown (but must available, because script tries inject script-element body).
when doesn't work without callback-parameter there must issue not exposed code, please post more code or demo/link.
Comments
Post a Comment