Jump to content



Photo

Google Maps API + Canvas


  • Please log in to reply
6 replies to this topic

#1 +Nik L

Nik L

    Where's my pants?

  • Tech Issues Solved: 2
  • Joined: 14-January 03

Posted 12 February 2010 - 23:58

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



#2 OP +Nik L

Nik L

    Where's my pants?

  • Tech Issues Solved: 2
  • Joined: 14-January 03

Posted 15 February 2010 - 23:15

Bump?

#3 OP +Nik L

Nik L

    Where's my pants?

  • Tech Issues Solved: 2
  • Joined: 14-January 03

Posted 16 February 2010 - 19:46

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

#4 Limit-Studios

Limit-Studios

    Neowinian

  • Joined: 14-July 05
  • Location: UK

Posted 16 February 2010 - 20:04

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

This should work let me know if it doesn't

#5 OP +Nik L

Nik L

    Where's my pants?

  • Tech Issues Solved: 2
  • Joined: 14-January 03

Posted 16 February 2010 - 20:10

That works a charm thanks.

I now want to get it working with Canvas.

Cheers :)

#6 Limit-Studios

Limit-Studios

    Neowinian

  • Joined: 14-July 05
  • Location: UK

Posted 16 February 2010 - 20:12

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.

#7 OP +Nik L

Nik L

    Where's my pants?

  • Tech Issues Solved: 2
  • Joined: 14-January 03

Posted 16 February 2010 - 22:06

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