Sign in to follow this  

Google Maps API + Canvas

Recommended Posts

Nefarious Trigger    6,986

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="http://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>

  • Like 1

Share this post


Link to post
Share on other sites
Nefarious Trigger    6,986

Bump?

Share this post


Link to post
Share on other sites
Nefarious Trigger    6,986

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

Share this post


Link to post
Share on other sites
Limit-Studios    0

<!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&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

Share this post


Link to post
Share on other sites
Nefarious Trigger    6,986

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
Limit-Studios    0

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
Nefarious Trigger    6,986

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  

  • Recently Browsing   0 members

    No registered users viewing this page.