anyone help please?? On Jul 20, 12:56 pm, Hong <[email protected]> wrote: > Hello, > > I am new to Google Map API, and I am just constructing a site for a > company which have different branches and therefore I have to make > different google maps for it in a single page using AJAX. > > below is the > link:https://docs.google.com/document/pub?id=1xI-TsmKF9DzKiZrAbr0197NYcpWj... > > but i am afraid that i cannot link the css and js to the html. > anyone can suggest me where can place the html together with the css/ > js > > or below is the code of the html: > > <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/ > TR/html4/strict.dtd"> > <html> > <head> > <title>Contact Us - Shops and Location</title> > <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> > <link rel="stylesheet" href="./css/ui.tabs.css" type="text/css" > media="print, projection, screen"> > <style type="text/css" media="screen, projection"> > h1 { > margin: 1em 0 1.5em; > font-size: 18px; > } > </style> > > <script src="./js/jquery-1.3.2.js" type="text/javascript"></script> > <script src="./js/ui.core.js" type="text/javascript"></script> > <script src="./js/ui.tabs.js" type="text/javascript"></script> > <script type="text/javascript"> > $(function() { > $('#container-1 ul').tabs(); > }); > </script> > > <script src="http://maps.google.com/maps? > file=api&v=2.x&key=ABQIAAAAzr2EBOXUKnm_jVnk0OJI7xSosDVG8KKPE1- > m51RBrvYughuyMxQ-i1QfUnH94QxWIa6N4U6MouMmBA" type="text/javascript"></ > script> > <script type="text/javascript"> > //<![CDATA[ > function initialize() { > if (GBrowserIsCompatible()) { > var mapOptions = { > googleBarOptions : { > style : "new" > } > } > > var s1map = new > GMap2(document.getElementById("s1map"), > mapOptions); > var c1map = new > GMap2(document.getElementById("c1map"), > mapOptions); > var c2map = new > GMap2(document.getElementById("c2map"), > mapOptions); > var c3map = new > GMap2(document.getElementById("c3map"), > mapOptions); > var c4map = new > GMap2(document.getElementById("c4map"), > mapOptions); > > var IconR = new GIcon(); > IconR.image = > "http://labs.google.com/ridefinder/images/ > mm_20_red.png"; > IconR.shadow = > "http://labs.google.com/ridefinder/images/ > mm_20_shadow.png"; > IconR.iconAnchor = new GPoint(6, 20); > > var IconY = new GIcon(); > IconY.image = > "http://labs.google.com/ridefinder/images/ > mm_20_yellow.png"; > IconY.shadow = > "http://labs.google.com/ridefinder/images/ > mm_20_shadow.png"; > IconY.iconAnchor = new GPoint(6, 20); > > var IconG = new GIcon(); > IconG.image = > "http://labs.google.com/ridefinder/images/ > mm_20_green.png"; > IconG.shadow = > "http://labs.google.com/ridefinder/images/ > mm_20_shadow.png"; > IconG.iconAnchor = new GPoint(6, 20); > > var s1latlng = new GLatLng(22.280277, 114.185454); > var s1myPov = { yaw: 190, pitch: -10, zoom: 0}; > > var c1latlng = new GLatLng(22.299766, 114.175862); > //DNA Galleria > var c1myPov = { yaw: 250, pitch: -20, zoom: 0}; > > var c2latlng = new GLatLng(22.319663, 114.169922); > //Argyle Centre > var c2myPov = { yaw: 210, pitch: -20, zoom: 0}; > > var c3latlng = new GLatLng(22.316002, 114.170149); > //Sino Centre > var c3myPov = { yaw: 105, pitch: -10, zoom: 0}; > > var c4latlng = new GLatLng(22.280687, 114.184698); > //Excelsior > Plaza > var c4myPov = { yaw: 35, pitch: -10, zoom: 0}; > > s1map.setCenter(s1latlng, 18); > s1map.setUIToDefault(); > > c1map.setCenter(c1latlng, 18); > c1map.setUIToDefault(); > > c2map.setCenter(c2latlng, 18); > c2map.setUIToDefault(); > > c3map.setCenter(c3latlng, 18); > c3map.setUIToDefault(); > > c4map.setCenter(c4latlng, 18); > c4map.setUIToDefault(); > > s1map.addControl(new GMapTypeControl()); > c1map.addControl(new GMapTypeControl()); > c2map.addControl(new GMapTypeControl()); > c3map.addControl(new GMapTypeControl()); > c4map.addControl(new GMapTypeControl()); > > var s1myPano = new > GStreetviewPanorama(document.getElementById("s1pano")); > s1myPano.setLocationAndPOV(s1latlng, s1myPov); > > var c1myPano = new > GStreetviewPanorama(document.getElementById("c1pano")); > c1myPano.setLocationAndPOV(c1latlng, c1myPov); > > var c2myPano = new > GStreetviewPanorama(document.getElementById("c2pano")); > c2myPano.setLocationAndPOV(c2latlng, c2myPov); > > var c3myPano = new > GStreetviewPanorama(document.getElementById("c3pano")); > c3myPano.setLocationAndPOV(c3latlng, c3myPov); > > var c4myPano = new > GStreetviewPanorama(document.getElementById("c4pano")); > c4myPano.setLocationAndPOV(c4latlng, c4myPov); > > GEvent.addListener(s1map,"click", function(overlay,s1latlng) > { > s1myPano.setLocationAndPOV(s1latlng); > }); > > GEvent.addListener(c1map,"click", > function(overlay,c1latlng) { > c1myPano.setLocationAndPOV(c1latlng); > }); > > GEvent.addListener(c2map,"click", > function(overlay,c2latlng) { > c2myPano.setLocationAndPOV(c2latlng); > }); > > GEvent.addListener(c3map,"click", > function(overlay,c3latlng) { > c3myPano.setLocationAndPOV(c3latlng); > }); > > GEvent.addListener(c4map,"click", > function(overlay,c4latlng) { > c4myPano.setLocationAndPOV(c4latlng); > }); > > GEvent.addListener(s1myPano, "error", handleNoFlash); > GEvent.addListener(c1myPano, "error", handleNoFlash); > GEvent.addListener(c2myPano, "error", handleNoFlash); > GEvent.addListener(c3myPano, "error", handleNoFlash); > GEvent.addListener(c4myPano, "error", handleNoFlash); > > var s1arrow = new GMarker(new GLatLng(90, 0), { icon: > IconY }); > s1map.addOverlay(s1arrow); > s1arrow.setLatLng(s1latlng); > var s1lastPoint; > > var c1arrow = new GMarker(new GLatLng(90, 0), { icon: > IconY }); > c1map.addOverlay(c1arrow); > c1arrow.setLatLng(c1latlng); > var c1lastPoint; > > var c2arrow = new GMarker(new GLatLng(90, 0), { icon: > IconY }); > c2map.addOverlay(c2arrow); > c2arrow.setLatLng(c2latlng); > var c2lastPoint; > > var c3arrow = new GMarker(new GLatLng(90, 0), { icon: > IconY }); > c3map.addOverlay(c3arrow); > c3arrow.setLatLng(c3latlng); > var c3lastPoint; > > var c4arrow = new GMarker(new GLatLng(90, 0), { icon: > IconY }); > c4map.addOverlay(c4arrow); > c4arrow.setLatLng(c4latlng); > var c4lastPoint; > > GEvent.addListener(s1map, "click", function(overlay, point) { > if (!overlay) { > s1myPano.remove(); > s1myPano.setLocationAndPOV(point); > s1arrow.setLatLng(point); > s1lastPoint = point; > } > }); > > GEvent.addListener(c1map, "click", function(overlay, point) { > if (!overlay) { > c1myPano.remove(); > c1myPano.setLocationAndPOV(point); > c1arrow.setLatLng(point); > c1lastPoint = point; > } > }); > > GEvent.addListener(c2map, "click", function(overlay, point) { > if (!overlay) { > c2myPano.remove(); > c2myPano.setLocationAndPOV(point); > c2arrow.setLatLng(point); > c2lastPoint = point; > } > }); > > GEvent.addListener(c3map, "click", function(overlay, point) { > if (!overlay) { > c3myPano.remove(); > c3myPano.setLocationAndPOV(point); > c3arrow.setLatLng(point); > c3lastPoint = point; > } > }); > > GEvent.addListener(c4map, "click", function(overlay, point) { > if (!overlay) { > c4myPano.remove(); > c4myPano.setLocationAndPOV(point); > c4arrow.setLatLng(point); > c4lastPoint = point; > } > }); > > var s1marker = new GMarker(s1latlng, {icon: IconG}); > GEvent.addListener(s1marker, "click", function() { > s1myPano.setLocationAndPOV(s1latlng, s1myPov); > }); > s1map.addOverlay(s1marker); > > var c1marker = new GMarker(c1latlng, {icon: IconG}); > GEvent.addListener(c1marker, "click", function() { > c1myPano.setLocationAndPOV(c1latlng, c1myPov); > }); > c1map.addOverlay(c1marker); > > var c2marker = new GMarker(c2latlng, {icon: IconG}); > GEvent.addListener(c2marker, "click", function() { > c2myPano.setLocationAndPOV(c2latlng, c2myPov); > }); > c2map.addOverlay(c2marker); > > var c3marker = new GMarker(c3latlng, {icon: IconG}); > GEvent.addListener(c3marker, "click", function() { > c3myPano.setLocationAndPOV(c3latlng, c3myPov); > }); > c3map.addOverlay(c3marker); > > var c4marker = new GMarker(c4latlng, {icon: IconG}); > GEvent.addListener(c4marker, "click", function() { > c4myPano.setLocationAndPOV(c4latlng, c4myPov); > }); > c4map.addOverlay(c4marker); > } > } > > function handleNoFlash(errorCode) { > if (errorCode == FLASH_UNAVAILABLE) { > alert("Error: Flash doesn't appear to be supported by > your > browser"); > return; > } > } > //]]> > </script> > </head> > > <body onload="initialize()" onunload="GUnload()"> > <h1>Contact Us - Shops and Location</h1> > <div id="container-1"> > <ul> > <li><a href="#branch"><span>Branch 分店</span></a></li> > <li><a href="#consignment"><span>Consignment Shop > 寄賣店</span></a></ > li> > </ul> > > <div id="branch"> > <p>Shop 238, 2/F, Causeway Place, Hong Kong Mansion, > 2-10 Great > George Street, Causeway Bay, Hong Kong</p> > <div id="s1map" style="width: 630px; height: 300px; > border: solid > 1px silver"></div><br> > <div id="s1pano" style="width: 630px; height: 300px; > border: solid > 1px silver"></div> > </div> > > <div id="consignment"> > <ul> > <li><a href="#consignment1" > class="note"><span>DNA Galleria</ > span></a></li> > <li><a > href="#consignment2"><span>Argyle Centre</span></a></li> > <li><a > href="#consignment3"><span>Sino Centre</span></a></li> > <li><a > href="#consignment4"><span>Excelsior Plaza</span></a></li> > </ul> > > <div id="consignment1"> > <p>Shop 204 a-b, 2/F, DNA Galleria, > 61-65 Chatham Road South, > Tsim Sha Tsui, Kowloon</p> > <div id="c1map" style="width: 630px; > height: 300px; border: solid > 1px silver"></div><br> > <div id="c1pano" style="width: 630px; > height: 300px; border: > solid 1px silver"></div> > </div> > > <div id="consignment2"> > <p>Shop 318, 3/F, Argyle Centre, > Phase 1, 65 Argyle Street, > Mongkok, Kowloon</p> > <div id="c2map" style="width: 630px; > height: 300px; border: solid > 1px silver"></div><br> > <div id="c2pano" style="width: 630px; > height: 300px; border: > solid 1px silver"></div> > </div> > > <div id="consignment3"> > <p>Shop M28, M/F, Sino Centre, > 582-592 Nathan Road, Mong Kok, > Kownloon</p> > <div id="c3map" style="width: 630px; > height: 300px; border: solid > 1px silver"></div><br> > <div id="c3pano" style="width: 630px; > height: 300px; border: > solid 1px silver"></div> > </div> > > <div id="consignment4"> > <p>Shop 208, 2/F, Excelsior Plaza, > 24-26 East Point Road, > Causeway Bay, Hong Kong</p> > <div id="c4map" style="width: 630px; > height: 300px; border: solid > 1px silver"></div><br> > <div id="c4pano" style="width: 630px; > height: 300px; border: > solid 1px silver"></div> > </div> > </div> > </div> > </body> > </html>
-- 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.
