Javascript API Quickstart Guide

As a way to jump start your ability to place a map on the page, the following step by step guide will provide the very basic entry point for a Micello Map.

Please be sure to review the remainer of the documentation for much more detailed and in-depth knowledge to the Micello Map APIs.
  1. Include the <!DOCTYPE HTML> tag at the very top of your page. (if you interested in understanding why, you can go here)

  2. Between the <head>and</head> tags, include the following line of code:

    1. <meta  name="viewport"  content="initial-scale=1.0,  user-scalable=no"  />

  3. Between the <head>and</head> tags, include the following line of code:

    1. <script  type="text/javascript"  src="http://maps.micello.com/webmap/v0/micellomap.js"></script>

  4. Just below the line of Javascript you added in Step 2, add the following block of Javascript (again still working between the "head" tags).

    Where you see YOUR_API_KEY, replace that text with the API key Micello provided for you. (Don't have one?)

    Where you see COMMUNITY_ID you will need to provide the ID that Micello assigns for each Community. You can find the ID on the Community Place page.

    1. <script  type="text/javascript">
    2. micello.maps.init(YOUR_API_KEY,mapInit);
    3. function  mapInit()  {
    4. var  mapControl  =  new  micello.maps.MapControl('mapElement');
    5. var  mapDataObject  =  mapControl.getMapData();
    6. mapDataObject.loadCommunity(COMMUNITY_ID);
    7. }
    8. </script>

  5. Right below the Javascript you added in Step 3, add the following lines (which will provide the ability to give the map a height and a width).

    Where you see YOUR_WIDTH, replace that text with the number of pixels you want the map to be wide. (For example, if you wanted your map to be 400 pixels wide, you would replace YOUR_WIDTH with 400px)

    Where you see YOUR_HEIGHT, replace that text with the number of pixels you want the map to be wide. (For example, if you wanted your map to be 400 pixels wide, you would replace YOUR_HEIGHT with 400px)

    1. <style  type="text/css">
    2. #mapElement  {width:YOUR_WIDTH;  height:YOUR_HEIGHT;}
    3. </style>

  6. And finally, between the "body" tags on your page, paste the following:

    1. <div  id="mapElement"></div>

Now if we put it all together into a working example, you can see how each of the pieces on the page fit together. (You can download this HTML example at the bottom of the page as well)

  1. <!DOCTYPE  HTML>
  2. <html>
  3. <head>
  4. <title>Map  View</title>
  5. <meta  name="viewport"  content="initial-scale=1.0,  user-scalable=no"  />
  6. <meta  http-equiv="Content-Type"  content="text/html;  charset=UTF-8">
  7. <script  type="text/javascript"  src="http://maps.micello.com/webmap/v0/micellomap.js"></script>
  8. <script  type="text/javascript">
  9. micello.maps.init("52fc1a02-00a3-4642-8f5a-db3eddbe2ac8",mapInit);
  10. function  mapInit()  {
  11. var  mapControl  =  new  micello.maps.MapControl('mapElement');
  12. var  mapDataObject  =  mapControl.getMapData();
  13. mapDataObject.loadCommunity(78);
  14. }
  15. </script>
  16. <style  type="text/css">
  17. html,  body  {  height:  100%;  width:  100%;  margin:  0;  overflow:hidden;}
  18. #mapElement  {width:100%;  height:100%;}
  19. </style>
  20. </head>
  21. <body>
  22. <div  id="mapElement"></div>
  23. </body>
  24. </html>