Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
branch: master
133 lines (120 sloc) 4.655 kb
<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<meta name="keywords" content="getParameterByName,openInfoBubble,addMarkers" />
<meta http-equiv="X-UA-Compatible" content="IE=7; IE=EmulateIE9; IE=EmulateIE10;"/>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>HERE Maps API for JavaScript Example: Pre-open an information bubble</title>
<meta name="description" content="How to load a page with a read opened information bubbler"/>
<meta name="keywords" content="infobubble, marker, map component, bubble"/>
<!-- 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"/>
<!-- Set up constants such as APP ID and token -->
<script type="text/javascript" src="libs/hereAppIdAndToken.js"></script>
<!-- Bootstrap jQuery Library -->
<script type="text/javascript" src="libs/jQl.min.js"></script>
<!-- Asynchronously the HERE Maps API for JavaScript -->
<script type="text/javascript" src="libs/hereAsyncLoader.js"
id="HereMapsLoaderScript"
data-map-container="mapContainer"
data-params="all"
data-callback="afterHereMapLoad" >
</script>
<link rel="icon" href="http://here.com/favicon.ico"/>
<!--<link href="http://developer.here.com/html/css/main.css" rel="stylesheet" />-->
</head>
<body>
<h1>Opening Infobubbles</h1>
<div id="mapContainer" style="width:540px; height:334px;"></div>
<div id="uiContainer">
Click on a link to pre-open the info bubble:<br/>
<a href="opening-infobubble-with-id.html?id=1">Brandenburg Gate</a><br/>
<a href="opening-infobubble-with-id.html?id=2">Ferhsehturm</a><br/>
<br/>
</div>
<script id="example-code" data-categories="infobubbles" type="text/javascript">
//<![CDATA[
var map,
infoBubbles,
container;
function getParameterByName(name) {
name = name.replace(/[\[]/, "\\\[").replace(/[\]]/, "\\\]");
var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"),
results = regex.exec(location.search);
return results == null ? "" : decodeURIComponent(results[1].replace(/\+/g, " "));
}
function openInfoBubble() {
var param = getParameterByName('id'),
TOUCH = nokia.maps.dom.Page.browser.touch,
CLICK = TOUCH ? 'tap' : 'click',
len = container.objects.getLength(),
i;
if (param === '') {
return; // Don't open a bubble.
}
// Iterate through the markers to find the correct id.
for (i = 0; i < len; i += 1) {
if (param === container.objects.get(i).id) {
// fire an event to open the bubble.
container.dispatch(
new nokia.maps.dom.Event(
{type: CLICK,
target: container.objects.get(i)}
)
);
map.zoomTo(container.objects.get(i).getBoundingBox(), true);
break;
}
}
}
function addMarkers(map) {
container = new nokia.maps.map.Container();
/* Add two markers and their infoBubble text
* along with a unique id attribute
*/
var brandenburgerTorMarker = new nokia.maps.map.StandardMarker(
new nokia.maps.geo.Coordinate(52.516237, 13.377686),
{bubbleText : 'Brandenburger Tor',
id : '1' }
),
//
// The Infobubble attribute can also be HTML.
//
infoBubbleHTML = '<div>' +
'<h2>InfoBubble with HTML content<\/h2>' +
'<img width=120 height=90 src=' +
'\'http://upload.wikimedia.org/wikipedia/commons/' +
'8/84/Berlin-fernsehturm.JPG\' ' +
'alt=\'\'/><br/><b>Fernsehturm, Berlin<\/b>' +
'<\/div>',
fernsehturmMarker = new nokia.maps.map.StandardMarker(
new nokia.maps.geo.Coordinate(52.520816, 13.409417),
{bubbleText : infoBubbleHTML,
id : '2' }
),
TOUCH = nokia.maps.dom.Page.browser.touch,
CLICK = TOUCH ? 'tap' : 'click';
// Add the markers onto the map
container.objects.addAll([brandenburgerTorMarker, fernsehturmMarker]);
// Add a listener to the on click event for the markers.
container.addListener(CLICK, function (evt) {
// Set the tail of the bubble to the coordinate of the marker
infoBubbles.openBubble(evt.target.bubbleText, evt.target.coordinate);
});
map.objects.add(container);
}
function afterHereMapLoad(theMap) {
map = theMap;
map.set('center', new nokia.maps.geo.Coordinate(52.52, 13.37));
map.setZoomLevel(13);
infoBubbles = new nokia.maps.map.component.InfoBubbles();
map.components.add(infoBubbles);
addMarkers(map);
openInfoBubble();
}
//]]>
</script>
<script type="text/javascript" src="libs/prettyprint.js"></script>
</body>
</html>
Jump to Line
Something went wrong with that request. Please try again.