hjweber

Esri Javascript API and iUI

Discussion created by hjweber on Jul 8, 2011
Latest reply on Jul 12, 2011 by hjweber
I want to display a map and a marker with the Esri Javascript API and Google iUI.
The map is displayed but not the marker.
Here is a code example (maptest.html):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
         "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
#map{width:320px;height:440px;}
</style>
<title>OSM Test</title>
<meta name="viewport" content="width=320; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"/>
<style type="text/css" media="screen">@import "iui/iui.css";</style>
<script type="application/x-javascript" src="iui/iui.js"></script>
<script src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=2.3" type="text/javascript"></script>
<link href="http://serverapi.arcgisonline.com/jsapi/arcgis/2.3/js/dojo/dijit/themes/claro/claro.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
function loadmap()
  {
   var initExtent = new esri.geometry.Extent({"xmin":-10427539,"ymin":5592973,"xmax":-10358746,"ymax":5638836,"spatialReference":{"wkid":102100}});
   map = new esri.Map("map",{extent:initExtent});
   var basemapURL= "http://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer"
   var basemap = new esri.layers.ArcGISTiledMapServiceLayer(basemapURL);
   map.addLayer(basemap);
   dojo.connect(map, 'onLoad', function()
   {
    var pt = new esri.geometry.Point(-93.3, 45, new esri.SpatialReference({ 'wkid': 4326 }));
    map.graphics.add(new esri.Graphic(esri.geometry.geographicToWebMercator(pt), new esri.symbol.SimpleMarkerSymbol(),
     { 'title': 'Some Title...', 'content': 'Some content...' }, new esri.InfoTemplate('${title}', '${content}')
    ));
   });
  }
</script>
</head>

<body onload="loadmap()">
    <div class="toolbar">
        <h1 id="pageTitle"></h1>
        <a id="backButton" class="button" href="#"></a>
    </div>
   
    <ul id="home" title="Menu" selected = "true">
        <li><a href="#map">Esri Map Test</a></li>
    </ul>
   
    <div id="map" title="Esri Map Test"></div>
   
</body>
</html>

Outcomes