Hello everyone. This is my first post and its about a problem I can't figure out. I wanted to make a google map based interface
with a marker pointing specific locations. It all went well till I loaded the
page. I can see my map.but I can't see the marker. It is supposed to
point at the map center.Here is the code:<br>
<br>##############################<div id=":3z" class="ii gt">###################################################################################################################<br> <br><html xmlns="<a href="http://www.w3.org/1999/xhtml" target="_blank">http://www.w3.org/1999/xhtml</a>"><br>
<head><br><title>User Interface</title><br><br><link rel="stylesheet" href="file:///C:/Documents%20and%20Settings/N-compass/Desktop/UI/basicstyle.css" /> <br><br><link rel="stylesheet" href="file:///C:/Documents%20and%20Settings/N-compass/Desktop/UI/google.css" type="text/css" /><br>
<br><link rel="stylesheet" href="file:///C:/Documents%20and%20Settings/N-compass/Desktop/UI/style.css" type="text/css" /><br><br><script src='<a href="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAAjpkAC9ePGem0lIq5XcMiuhR_wWLPFku8Ix9i2SXYRVK3e45q1BQUd_beF8dtzKET_EteAjPdGDwqpQ" target="_blank">http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAAjpkAC9ePGem0lIq5XcMiuhR_wWLPFku8Ix9i2SXYRVK3e45q1BQUd_beF8dtzKET_EteAjPdGDwqpQ</a>'></script><br>
<script src="<a href="http://openlayers.org/dev/OpenLayers.js" target="_blank">http://openlayers.org/dev/OpenLayers.js</a>"></script> <br><script type="text/javascript"><br>
<br> var map;<br> var size, icon;<br> <br> function init(){<br> <br> map = new OpenLayers.Map('map');<br> <br> <br> var gphy = new OpenLayers.Layer.Google(<br> "Google Physical",<br>
{type: G_PHYSICAL_MAP}<br> );<br> var gmap = new OpenLayers.Layer.Google(<br> "Google Streets", // the default<br> {numZoomLevels: 20}<br> );<br> var ghyb = new OpenLayers.Layer.Google(<br>
"Google Hybrid",<br> {type: G_HYBRID_MAP, numZoomLevels: 20}<br> );<br> var gsat = new OpenLayers.Layer.Google(<br> "Google Satellite",<br> {type: G_SATELLITE_MAP, numZoomLevels: 20}<br>
);<br> <br> map.addLayers([gphy, gmap, ghyb, gsat]);<br> <br> <br> <br> var proj = new OpenLayers.Projection("EPSG:4326");<br> var center = new OpenLayers.LonLat(72.856178,19.017656);<br>
center.transform(proj, map.getProjectionObject());<br> <br> map.setCenter(center,11);<br> <br> map.addLayer(layer);<br> var markers = new OpenLayers.Layer.Markers( "Markers" );<br>
map.addLayer(markers);<br><br> size = new OpenLayers.Size(15,15);<br> calculateOffset = function(size) {return new OpenLayers.Pixel(-(size.w/2), -size.h);};<br> icon = new OpenLayers.Icon('file:///C:/Documents%20and%20Settings/N-compass/Desktop/UI/marker.png',size, null, calculateOffset);<br>
<br> markers.addMarker(new OpenLayers.Marker(center,icon));<br> <br> map.addControl(new OpenLayers.Control.LayerSwitcher());<br> <br> }<br> <br></script><br></head><br> <br>
<body onload="init()"><br>
<h1 id="title">User Interface</h1><br> <br> <div id="tags"><br> </div><br><br> <p id="shortdesc"><br> This project is still not over<br>
</p><br><br> <a style="float:right" href="" id="permalink">Permalink</a><br> <br> <div id="map" class="smallmap" onclick="co-ordinate()"></div><br>
<br> <div id="docs"></div><br> </body><br></html><br>########################################################################################################################################<br>
The path to css and icon files have been changed to point to files in
my local directory. But they are the same files used in the openlayers
examples.<br><br>I know I am missing something very silly, can't figure it out. Any ideas?<br>
</div>