<html>
<head>
<title>OpenLayers Simplest Example</title>
</head>
<body>
<div id="Map" style="height:600px;"></div>
<script src="http://openlayers.org/api/OpenLayers.js"></script>
<script>
var lon = 139.83643;
var lat = 38.915394;
var zoom = 16;
var fromProjection = new OpenLayers.Projection("EPSG:4326");
var toProjection = new OpenLayers.Projection("EPSG:900913");
var position = new OpenLayers.LonLat(lon, lat).transform( fromProjection, toProjection);
map = new OpenLayers.Map("Map");
var mapnik = new OpenLayers.Layer.OSM();
map.addLayer(mapnik);
map.setCenter(position, zoom);
var popup;
var marker_layer = new OpenLayers.Layer.Markers( "Markers" );
var size = new OpenLayers.Size(42,50);
var offset = new OpenLayers.Pixel(-(size.w/2), -size.h);
var contentStrings = new Array();
var icon_marker = new OpenLayers.Icon('http://www.openlayers.org/dev/img/marker.png',size,offset);
marker = new OpenLayers.Marker(new OpenLayers.LonLat(lon,lat).transform(fromProjection,toProjection), icon_marker);
marker.events.register('click', marker, function(evt) {
popup = new OpenLayers.Popup.FramedCloud("Popup",
new OpenLayers.LonLat(lon,lat).transform( fromProjection, toProjection),
null,"ほげほげ",null,true);
map.addPopup(popup);
});
marker.events.register('mouseout', marker, function(evt) {popup.hide();});
marker_layer.addMarker(marker);
var icon_marker2 = new OpenLayers.Icon('http://www.openlayers.org/dev/img/marker.png',size,offset);
marker2 = new OpenLayers.Marker(new OpenLayers.LonLat(139.83664,38.915955).transform(fromProjection,toProjection), icon_marker2);
marker2.events.register('click', marker2, function(evt) {
popup2 = new OpenLayers.Popup.FramedCloud("Popup2",
new OpenLayers.LonLat(139.83664, 38.915955).transform( fromProjection, toProjection),
null,"fujix",null,true);
map.addPopup(popup2);
});
//here add mouseout event
marker2.events.register('mouseout', marker2, function(evt) {popup2.hide();});
marker_layer.addMarker(marker2);
map.addLayer(marker_layer);
</script>
</body>
</html>