Infobox

Javascript
Full HTML

jsMaps.loader(function (){
        var tiles = new jsMaps.Native.Tiles();
tiles.addTileLayer("http://{s}.tile.osm.org/{z}/{x}/{y}.png",['a','b','c'],'&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap contributors</a>.','OpenStreetMap');
tiles.addTileLayer("http://{s}.mqcdn.com/tiles/1.0.0/map/{z}/{x}/{y}.png",['otile1','otile2','otile3','otile4'],'&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap contributors</a>. Tiles courtesy of <a href="http://www.mapquest.com/" target="_blank">MapQuest</a> <img src="https://developer.mapquest.com/content/osm/mq_logo.png">','Map Quest');
tiles.addTileLayer("http://{s}.mqcdn.com/tiles/1.0.0/sat/{z}/{x}/{y}.jpg",['oatile1','oatile2','oatile3','oatile4'],'&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap contributors</a>. Tiles courtesy of <a href="http://www.mapquest.com/" target="_blank">MapQuest</a> <img src="https://developer.mapquest.com/content/osm/mq_logo.png">','Map Quest Satellite',19);

        var map = jsMaps.api.init(
                '#map',
                'native',
                {
                    center: {
                        latitude: 32.078930,
                        longitude: 34.773241
                    },
                    zoom: 14,
                    mouse_scroll: true,
                    zoom_control: true,
                    map_type: true
                },tiles
        );

        var marker1 = jsMaps.api.marker(map,{position: {lat: 32.071351,lng: 34.807546}, title: 'Marker No 1',draggable: true});
        var marker2 = jsMaps.api.marker(map,{position: {lat: 32.083458,lng: 34.772921}, title: 'Marker No 2',draggable: true});

        var contentString = '<div id="content">'+
                '<div id="siteNotice">'+
                '</div>'+
                '<h1 id="firstHeading" class="firstHeading">Text displayed on click</h1>'+
                '<div id="bodyContent">'+
                '<p>This infobox is displayed only on click</p>'+
                '</div>'+
                '</div>';

        var contentString2 = '<div id="content">'+
                '<div id="siteNotice">'+
                '</div>'+
                '<h1 id="firstHeading" class="firstHeading">Text displayed on hover</h1>'+
                '<div id="bodyContent">'+
                '<p>This infobox is displayed only on hover</p>'+
                '</div>'+
                '</div>';

        var infoWindow = jsMaps.api.infoWindow({content: contentString});
        var infoWindow2 = jsMaps.api.infoWindow({content: contentString2});

        jsMaps.api.attach_event(marker1,'click',function() {
            infoWindow.open(map,marker1);
        });

        jsMaps.api.attach_event(marker2,'mouseover',function() {
            infoWindow2.open(map,marker2);
        });

        jsMaps.api.attach_event(marker2,'mouseout',function() {
            infoWindow2.close();
        });
    });

<?xml version="1.0" encoding="UTF-8"?>
<!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" xml:lang="en" lang="en">
  <head>
    <title>Example</title>
    <style>html, body, #map {width:100%;height: 100%; margin: 0; padding: 0;}</style>
    <link type="text/css" rel="stylesheet" href="https://cdn.rawgit.com/markkr125/jsmaps/v0.0.15/library/native/core.native.css" />
    <script src="https://cdn.rawgit.com/markkr125/jsmaps/v0.0.15/library/core.abstract.js" type="text/javascript">
    </script>
    <script src="https://cdn.rawgit.com/markkr125/jsmaps/v0.0.15/library/core.abstract-helper.js" type="text/javascript">
    </script>
    <script src="https://cdn.rawgit.com/markkr125/jsmaps/v0.0.15/library/core.js" type="text/javascript">
    </script>
    <script src="https://cdn.rawgit.com/markkr125/jsmaps/v0.0.15/library/native/core.native.js" type="text/javascript">
    </script>
    <script src="https://cdn.rawgit.com/markkr125/jsmaps/v0.0.15/library/native/core.native-ui.js" type="text/javascript">
    </script>
    <script src="https://cdn.rawgit.com/markkr125/jsmaps/v0.0.15/library/native/core.native-helper.js" type="text/javascript">
    </script>
    <script src="https://cdn.rawgit.com/markkr125/jsmaps/v0.0.15/library/native/core.native-marker.js" type="text/javascript">
    </script>
    <script src="https://cdn.rawgit.com/markkr125/jsmaps/v0.0.15/library/native/core.native-infoWindow.js" type="text/javascript">
    </script>
    <script src="https://cdn.rawgit.com/markkr125/jsmaps/v0.0.15/library/native/core.native-vector.js" type="text/javascript">
    </script>
  </head>
  <body>
    <script type='text/javascript'>
    jsMaps.loader(function (){
        var tiles = new jsMaps.Native.Tiles();
tiles.addTileLayer("http://{s}.tile.osm.org/{z}/{x}/{y}.png",['a','b','c'],'&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap contributors</a>.','OpenStreetMap');
tiles.addTileLayer("http://{s}.mqcdn.com/tiles/1.0.0/map/{z}/{x}/{y}.png",['otile1','otile2','otile3','otile4'],'&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap contributors</a>. Tiles courtesy of <a href="http://www.mapquest.com/" target="_blank">MapQuest</a> <img src="https://developer.mapquest.com/content/osm/mq_logo.png">','Map Quest');
tiles.addTileLayer("http://{s}.mqcdn.com/tiles/1.0.0/sat/{z}/{x}/{y}.jpg",['oatile1','oatile2','oatile3','oatile4'],'&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap contributors</a>. Tiles courtesy of <a href="http://www.mapquest.com/" target="_blank">MapQuest</a> <img src="https://developer.mapquest.com/content/osm/mq_logo.png">','Map Quest Satellite',19);

        var map = jsMaps.api.init(
                '#map',
                'native',
                {
                    center: {
                        latitude: 32.078930,
                        longitude: 34.773241
                    },
                    zoom: 14,
                    mouse_scroll: true,
                    zoom_control: true,
                    map_type: true
                },tiles
        );

        var marker1 = jsMaps.api.marker(map,{position: {lat: 32.071351,lng: 34.807546}, title: 'Marker No 1',draggable: true});
        var marker2 = jsMaps.api.marker(map,{position: {lat: 32.083458,lng: 34.772921}, title: 'Marker No 2',draggable: true});

        var contentString = '<div id="content">'+
                '<div id="siteNotice">'+
                '</div>'+
                '<h1 id="firstHeading" class="firstHeading">Text displayed on click</h1>'+
                '<div id="bodyContent">'+
                '<p>This infobox is displayed only on click</p>'+
                '</div>'+
                '</div>';

        var contentString2 = '<div id="content">'+
                '<div id="siteNotice">'+
                '</div>'+
                '<h1 id="firstHeading" class="firstHeading">Text displayed on hover</h1>'+
                '<div id="bodyContent">'+
                '<p>This infobox is displayed only on hover</p>'+
                '</div>'+
                '</div>';

        var infoWindow = jsMaps.api.infoWindow({content: contentString});
        var infoWindow2 = jsMaps.api.infoWindow({content: contentString2});

        jsMaps.api.attach_event(marker1,'click',function() {
            infoWindow.open(map,marker1);
        });

        jsMaps.api.attach_event(marker2,'mouseover',function() {
            infoWindow2.open(map,marker2);
        });

        jsMaps.api.attach_event(marker2,'mouseout',function() {
            infoWindow2.close();
        });
    });
</script>

<div id='map'>
  </div>
</body>
</html>

Infobox This example displays a map with two markers, clicking on a marker opens an infobubble which holds HTML content related to the marker.

Infobox
This example displays a map with two markers, clicking on a marker opens an infobubble which holds HTML content related to the marker.