Jump to content
  • 0
Sign in to follow this  
Followers 0

Google Maps API + Canvas

Question

Posted

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:

[code]
<!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="http://maps.google.com/maps?file=api&amp;v=2&amp;sensor=true&amp;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>
[/code]
1 person likes this

Share this post


Link to post
Share on other sites

6 answers to this question

  • 0

Posted

Bump?

Share this post


Link to post
Share on other sites
  • 0

Posted

Am truly shocked nobody is willing or able to help...

Share this post


Link to post
Share on other sites
  • 0

Posted

[code]<!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="http://maps.google.com/maps?file=api&amp;v=2&amp;sensor=true&amp;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>[/code]

This should work let me know if it doesn't

Share this post


Link to post
Share on other sites
  • 0

Posted

That works a charm thanks.

I now want to get it working with Canvas.

Cheers :)

Share this post


Link to post
Share on other sites
  • 0

Posted

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.

Share this post


Link to post
Share on other sites
  • 0

Posted

Aaaah, that would be why it didn't work then! Ta!

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!


Register a new account

Sign in

Already have an account? Sign in here.


Sign In Now
Sign in to follow this  
Followers 0

  • Recently Browsing   0 members

    No registered users viewing this page.