Chciałbym dodać obok markera przyklejony do niego blok div w którym następnie umieszczałbym swoją treść. Za pomoc odwdzięczę się zapłatą.
Tak jak na obrazku:
I jeszcze link gdzie można znaleźć dokumentacje API: http://developer.here.com/javascript_api_explorer
Kod strony:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=7; IE=EmulateIE9; IE=EmulateIE10;"/>
<base href="http://developer.here.com/apiexplorer/examples/api-for-js/markers/marker.html" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Nokia Maps API for JavaScript Example: Adding a marker</title>
<meta name="description" content="Putting a standard marker onto the map"/>
<meta name="keywords" content="standardmarker, map objects, markers"/>
<!-- For scaling content for mobile devices, setting the viewport to the width of the device-->
<meta name=viewport content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<!-- Styling for example container (NoteContainer & Logger) -->
<link rel="stylesheet" type="text/css" href="http://developer.here.com/apiexplorer/examples/templates/js/exampleHelpers.css"/>
<!-- By default we add ?with=all to load every package available, it's better to change this parameter to your use case. Options ?with=maps|positioning|places|placesdata|directions|datarendering|all -->
<script type="text/javascript" charset="UTF-8" src="http://api.maps.nokia.com/2.2.4/jsl.js?with=all"></script>
<!-- JavaScript for example container (NoteContainer & Logger) -->
<script type="text/javascript" charset="UTF-8" src="http://developer.here.com/apiexplorer/examples/templates/js/exampleHelpers.js"></script>
<style type="text/css">
html {
overflow:hidden;
}
body {
margin: 0;
padding: 0;
overflow: hidden;
width: 100%;
height: 100%;
position: absolute;
}
#mapContainer {
width: 100%;
height: 100%;
left: 0;
top: 0;
position: absolute;
}
</style>
</head>
<body>
<div id="mapContainer"></div>
<div id="uiContainer"></div>
<script type="text/javascript" id="exampleJsSource">
/* Set authentication token and appid
* WARNING: this is a demo-only key
* please register on http://api.developer.nokia.com/
* and obtain your own developer's API key
*/
nokia.Settings.set( "appId", "TWOJE ID");
nokia.Settings.set( "authenticationToken", "TWÓJ TOKEN");
// Get the DOM node to which we will append the map
var mapContainer = document.getElementById("mapContainer");
// Create a map inside the map container DOM node
var map = new nokia.maps.map.Display(mapContainer, {
// Initial center and zoom level of the map
center: [51.760615, 19.457474],
zoomLevel: 7,
components: [
new nokia.maps.map.component.ZoomBar(),
new nokia.maps.map.component.Behavior(),
]
});
var standardMarker = new nokia.maps.map.Marker(new nokia.maps.geo.Coordinate(51.760615, 17.457474));
map.objects.add(standardMarker);
/* We create a UI notecontainer for example description
* NoteContainer is a UI helper function and not part of the Nokia Maps API
* See exampleHelpers.js for implementation details
*/
var noteContainer = new NoteContainer({
id: "standardMarkerUi",
parent: document.getElementById("uiContainer"),
title: "Adding a StandardMarker",
content:
'<p>This is example shows how to quickly add a StandardMarker to the map.</p>'
});
</script>
</body>
</html>