HTML code not displaying in the sidebar

  • msphoshoko

    (@msphoshoko)


    11 years, 10 months ago

    I’m trying to display a Map on my website’s side bar by pasting my HTML code in the text widget but it still doesn’t show anything. Can somebody tell me what I might be doing wrong. Below is the HTML code.

    [please review and follow http://codex.ww.wp.xz.cn/Forum_Welcome#Posting_Code – the code below might be partially broken]

    <!DOCTYPE html>
<html>
<head>
  <title>Gmaps example | CartoDB.js</title>
  <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
  <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
  <link rel="shortcut icon" href="http://cartodb.com/assets/favicon.ico" />
  <style>
    html, body, #map {
      height: 100%;
      padding: 0;
      margin: 0;
    }
  </style>

  <link rel="stylesheet" href="http://libs.cartocdn.com/cartodb.js/v3/themes/css/cartodb.css" />
    <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
</head>
<body>

	<div align="left">
   <input type="text" value="" id="searchbox" name="searchbox" style=" width:800px;height:30px; font-size:15px;">
 </div>

 <div id="map"></div>
  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js"></script>
 <!-- include google maps library *before* load cartodb.js -->
<script type="text/javascript" src="http://maps.google.com/maps/api/js?libraries=places&sensor=false"></script>
 <!-- include cartodb.js library -->
 <script src="http://libs.cartocdn.com/cartodb.js/v3/cartodb.uncompressed.js"></script>

 <script>
  function main() {
    var map;

          // create google maps map
          var mapOptions = {
            zoom: 13,
            center: new google.maps.LatLng(-26.25, 27.9),
            mapTypeId: google.maps.MapTypeId.ROADVIEW
          };
          map = new google.maps.Map(document.getElementById('map'),  mapOptions);

        var geocoder = new google.maps.Geocoder();  

     $(function() {
         $("#searchbox").autocomplete({

           source: function(request, response) {

          if (geocoder == null){
           geocoder = new google.maps.Geocoder();
          }
             geocoder.geocode( {'address': request.term }, function(results, status) {
               if (status == google.maps.GeocoderStatus.OK) {

                  var searchLoc = results[0].geometry.location;
               var lat = results[0].geometry.location.lat();
                  var lng = results[0].geometry.location.lng();
                  var latlng = new google.maps.LatLng(lat, lng);
                  var bounds = results[0].geometry.bounds;

                  geocoder.geocode({'latLng': latlng}, function(results1, status1) {
                      if (status1 == google.maps.GeocoderStatus.OK) {
                        if (results1[1]) {
                         response($.map(results1, function(loc) {
                        return {
                            label  : loc.formatted_address,
                            value  : loc.formatted_address,
                            bounds   : loc.geometry.bounds
                          }
                        }));
                        }
                      }
                    });
            }
              });
           },
           select: function(event,ui){
      var pos = ui.item.position;
      var lct = ui.item.locType;
      var bounds = ui.item.bounds;

      if (bounds){
       map.fitBounds(bounds);
      }
           }
         });
     });  

          // create layer and add to the map, then add some intera
          cartodb.createLayer(map, 'http://msphoshoko.cartodb.com/api/v2/viz/d91b310e-055e-11e4-8ccb-0e10bcd91c2b/viz.json')
          .addTo(map)
          .on('done', function(layer) {
            var sublayer = layer.getSubLayer(0);
            sublayer.on('featureOver', function(e, pos, latlng, data) {
              cartodb.log.log(e, pos, latlng, data);
            });

            sublayer.on('error', function(err) {
              cartodb.log.log('error: ' + err);
            });

          })
          .on('error', function() {
            cartodb.log.log("some error occurred");
          });

        }

        window.onload = main;
      </script>
    </body>
Viewing 3 replies - 1 through 3 (of 3 total)
  • Christine Rondeau

    (@crondeau)

    11 years, 10 months ago

    You can post HTML or Javascript code in a text widget.
    Text widget are only for text.
    You may need to find a js or HTML widget plugin or just look for a Google map widget plugin.

    Thread Starter msphoshoko

    (@msphoshoko)

    11 years, 10 months ago

    Hi Christine,
    Thanks a lot, the HTML plugin works wonders when I paste my HTML code and then preview my map.It comes up fine.The only problem is that it does not reflect on my side bar.What could be the problem?

    Thread Starter msphoshoko

    (@msphoshoko)

    11 years, 10 months ago

    link

Viewing 3 replies - 1 through 3 (of 3 total)

The topic ‘HTML code not displaying in the sidebar’ is closed to new replies.