Please note that as of October 24, 2014, the Nokia Developer Wiki will no longer be accepting user contributions, including new entries, edits and comments, as we begin transitioning to our new home, in the Windows Phone Development Wiki. We plan to move over the majority of the existing entries. Thanks for all your past and future contributions.

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

From 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="">
<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=""></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 03:08.
24 page views in the last 30 days.