+Dick Montage Subscriber² Posted February 12, 2010 Subscriber² Share Posted February 12, 2010 I am trying to write a silly little HTML5 thing. I have placed a canvas on the page. I have got my location. I want to load a google map into the canvas of my current location. This is my code thus far: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <meta name="viewport" content="width=320; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"/> <meta name="apple-mobile-web-app-capable" content="yes" /> <title>At Your Party</title> <style> html *{ margin: 0px; padding: 0px; } .mainBody{ background-image: url(images/bg.png); } .mainPage{ width: 100%; } .pageTitle{ height: 56px; background-image: url(images/title.png); background-repeat: repeat-x; text-align: center; } #titleText{ font-family: "Helvetica","Verdana"; color: #FFF; font-weight: bold; font-size: 1.2em; line-height: 2.5em; text-shadow: #666666 2px 2px 1px; } </style> <script src="https://maps.google.com/maps?file=api&v=2&sensor=true&key=ABQIAAAA4XkrtZV-oPerMbns_EMkJBSCkqQKFtMyq_fTSvOVSE8A0-j-GxSn_1gCTazvpHJPs5bI-v7T04PAkA" type="text/javascript"></script> <script> function showMap(position) { map = new GMap2(document.getElementById("mapCanvas")); map.setCenter(new GLatLng(position.coords.latitude, position.coords.longitude),13); map.addControl(new GMapTypeControl()); map.addControl(new GLargeMapControl()); } </script> </head> <body class="mainBody" onload="navigator.geolocation.getCurrentPosition(showMap);"> <div class="mainPage"> <div class="pageTitle"> <span id="titleText">Title here...</span> </div> <div class="pageContent"> <canvas id="mapCanvas" width="150" height="150"></canvas> </div> </div> </body> </html> Nicholas-c 1 Share Link to comment Share on other sites More sharing options...
0 +Dick Montage Subscriber² Posted February 15, 2010 Author Subscriber² Share Posted February 15, 2010 Bump? Link to comment Share on other sites More sharing options...
0 +Dick Montage Subscriber² Posted February 16, 2010 Author Subscriber² Share Posted February 16, 2010 Am truly shocked nobody is willing or able to help... Link to comment Share on other sites More sharing options...
0 Limit-Studios Posted February 16, 2010 Share Posted February 16, 2010 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <meta name="viewport" content="width=320; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"/> <meta name="apple-mobile-web-app-capable" content="yes" /> <title>At Your Party</title> <style> html *{ margin: 0px; padding: 0px; } .mainBody{ background-image: url(images/bg.png); } .mainPage{ width: 100%; } .pageTitle{ height: 56px; background-image: url(images/title.png); background-repeat: repeat-x; text-align: center; } #titleText{ font-family: "Helvetica","Verdana"; color: #FFF; font-weight: bold; font-size: 1.2em; line-height: 2.5em; text-shadow: #666666 2px 2px 1px; } </style> <script src="https://maps.google.com/maps?file=api&v=2&sensor=true&key=ABQIAAAA4XkrtZV-oPerMbns_EMkJBSCkqQKFtMyq_fTSvOVSE8A0-j-GxSn_1gCTazvpHJPs5bI-v7T04PAkA" type="text/javascript"></script> <script type="text/javascript"> function showMap(position) { map = new GMap2(document.getElementById("mapCanvas")); var lat = position.coords.latitude; var lon = position.coords.longitude; var myPoint = new GLatLng(lat, lon); map.setCenter(myPoint, 15); var yourCurrPoint = new GMarker(myPoint); map.addOverlay(yourCurrPoint); } </script> </head> <body class="mainBody" onload="navigator.geolocation.getCurrentPosition(showMap)" onunload="GUnload()"> <div class="mainPage"> <div class="pageTitle"> <span id="titleText">Title here...</span> </div> <div class="pageContent"> <div id="mapCanvas" style="width: 500px; height: 300px"> </div> </div> </div> </body> </html> This should work let me know if it doesn't Link to comment Share on other sites More sharing options...
0 +Dick Montage Subscriber² Posted February 16, 2010 Author Subscriber² Share Posted February 16, 2010 That works a charm thanks. I now want to get it working with Canvas. Cheers :) Link to comment Share on other sites More sharing options...
0 Limit-Studios Posted February 16, 2010 Share Posted February 16, 2010 no problem. I don't think you can put the map in a canvas element. However you can make the pointer use a canvas element and plot that onto the map. Link to comment Share on other sites More sharing options...
0 +Dick Montage Subscriber² Posted February 16, 2010 Author Subscriber² Share Posted February 16, 2010 Aaaah, that would be why it didn't work then! Ta! Link to comment Share on other sites More sharing options...
Question
+Dick Montage Subscriber²
I am trying to write a silly little HTML5 thing.
I have placed a canvas on the page.
I have got my location.
I want to load a google map into the canvas of my current location.
This is my code thus far:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <meta name="viewport" content="width=320; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"/> <meta name="apple-mobile-web-app-capable" content="yes" /> <title>At Your Party</title> <style> html *{ margin: 0px; padding: 0px; } .mainBody{ background-image: url(images/bg.png); } .mainPage{ width: 100%; } .pageTitle{ height: 56px; background-image: url(images/title.png); background-repeat: repeat-x; text-align: center; } #titleText{ font-family: "Helvetica","Verdana"; color: #FFF; font-weight: bold; font-size: 1.2em; line-height: 2.5em; text-shadow: #666666 2px 2px 1px; } </style> <script src="https://maps.google.com/maps?file=api&v=2&sensor=true&key=ABQIAAAA4XkrtZV-oPerMbns_EMkJBSCkqQKFtMyq_fTSvOVSE8A0-j-GxSn_1gCTazvpHJPs5bI-v7T04PAkA" type="text/javascript"></script> <script> function showMap(position) { map = new GMap2(document.getElementById("mapCanvas")); map.setCenter(new GLatLng(position.coords.latitude, position.coords.longitude),13); map.addControl(new GMapTypeControl()); map.addControl(new GLargeMapControl()); } </script> </head> <body class="mainBody" onload="navigator.geolocation.getCurrentPosition(showMap);"> <div class="mainPage"> <div class="pageTitle"> <span id="titleText">Title here...</span> </div> <div class="pageContent"> <canvas id="mapCanvas" width="150" height="150"></canvas> </div> </div> </body> </html>Link to comment
Share on other sites
6 answers to this question
Recommended Posts