• 0

Google Maps API + Canvas

Asked by Dick Montage,

 Share

Question

Grand Master

Dick Montage

Posted
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:

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

  • 0
Community Regular

Limit-Studios

Posted
Posted 

<!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
This topic is now closed to further replies.
 Share
Go to question listing

  • Recently Browsing   0 members

    • No registered users viewing this page.