Demo

LocationBox JavaScript Demos

Zoom to Markers

Add:      Zoom:  

Instructions

Use the "Add" button to add multiple predefined markers. Use the "zoom" button to zoom into the area bounded by the markers.
See the JavaScript API for more information.

Source Code

The Javascript code for the above map is:

 <script language="Javascript" 
    src="http://www.locationbox.com.tr/locationbox/services?Key=key&Cmd=APIV2
    &Typ=JS"></script>
    
  <script language="JavaScript">
  var mapper  = new IMapper();

  function startup() {
    mapper.initMap(41.1, 29.1, 4);
    mapper.addNavigationPanel();
    return;
  } 
	
  
  function add() {
    mapper.addMarker('id_1', 41.1, 29.1, 'SampleMarker_1', 'M.PIN_1', 70, 70, null);
    mapper.addMarker('id_2', 41.01, 29.08, 'SampleMarker_2', 'M.PIN_2', 70, 70, null);
    mapper.addMarker('id_3', 41.04, 29.03, 'SampleMarker_3', 'M.PIN_3', 70, 70, null);
    mapper.addMarker('id_4', 40.98, 29.01, 'SampleMarker_4', 'M.PIN_4', 70, 70, null);
    return;
  } 
    
  function zoom() {
    mapper.zoomToMarkers("id_1,id_2,id_3,id_4");
    return;
  } 
    
  </script>

Button:

    <a href="javascript:add()"><img src="images/add.gif" border=0></a>
    <a href="javascript:zoom()"><img src="images/add.gif" border=0></a>
Hint

Do not leave any spaces between ids of the markers in input string of zoomToMarkers function.

Download working page
Remember that you need to use your key code as Key attribute.