How to display map in a widget using Google maps JavaScript API v3?

From Nokia Developer Wiki
Jump to: navigation, search
Article Metadata
Created: ekhoo (23 Sep 2009)
Last edited: hamishwillee (26 Jul 2012)

I created a Nokia Web Runtime Widget project using Aptana Studio and wanted to try displaying a map using the google maps javascript api v3. The index.html is created by Aptana, i added a few lines to display the google map. However, when i installed the widget in my N97, no map is displayed.

Tip.pngTip: Aptana studio has been superseded by Nokia Web Tools

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
<html xmlns="http://www.w3.org/1999/xhtml">
<title> Sample Widget</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script language="javascript" type="text/javascript" src="basic.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
<script type="text/javascript">
function initialize() {
var latlng = new google.maps.LatLng(1.383, 103.89);
var myOptions = {
zoom: 8,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
<body onLoad="initialize()">
<div id="map_canvas" style="width:100%; height:100%"></div>

Solution: 1) to remove DOCTYPE (1st 2 lines of codes) or

2) set the the width and height of map_canvas in px instead of percentage.

<div id="map_canvas" style="width:400px; height:500px">
This page was last modified on 26 July 2012, at 06:08.
18 page views in the last 30 days.