Sign In

Map Constructor

You can easily add our map to your website. There are two options for adding a map: dynamic and static. A dynamic map allows the user to interact with it. A static map is simply an image on which your objects can be displayed.

Map Creation

To add a map to your website, you need to perform several actions:

  1. Use the map constructor on our website http://maps.visicom.ua to get a link. To do this, select "Advanced" in the menu panel on the left side of the website. In the submenu, select "Map for Website".

dynamic-map-img1-ru

  1. In the constructor window, you can change the following map parameters:
  • Map size. To change the size, drag the black square located in the lower right corner. The size of the future map is displayed in the upper left corner.
  • Add your objects to the map. When right-clicking on the map, select "Add marker". You can specify a name for each marker. An established marker can be dragged to another location. To delete a marker, right-click on it and select "Delete marker".
  • Add route building on the map. When right-clicking on the map, select "Enable route". The route works only for dynamic maps, so when the "Static map" checkbox is set, it is not possible to add route building. To disable route building, right-click on the map and select "Disable route". Route building in the client's browser will be performed according to the following rules:
    • If no markers are set, the route is laid between the points specified during map creation;
    • If markers are present and geolocation is enabled, the route is built from the user's location to the nearest marker;
    • If markers are present and geolocation is disabled, the route is laid between the points specified during map creation.
  • Map type. If the "Static map" checkbox is set, the resulting link will point to a map image. The user will not be able to interact with this image (drag, zoom in, zoom out). On a static map, marker names are not displayed, only marker numbers.

Adding Map to Website

After setting all the necessary map parameters, click the "Copy" button at the bottom. The link code will be copied to the clipboard.

For a dynamic map, paste the copied code on your website page in the place where you would like to add the map. Below is an example of your page code with an added dynamic map:

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    </head>
    <body>
        <!-- Copied code -->
        <iframe src="https://maps.visicom.ua/iframe/en/745:490/?c/30.45444:50.44657:11/m0/30.485:50.45313/n0/%D0%BC%D0%B5%D1%82%D0%BA%D0%B01/m1/30.47401:50.5191/n1/%D0%BC%D0%B5%D1%82%D0%BA%D0%B02/m2/30.51178:50.43258/n2/%D0%BC%D0%B5%D1%82%D0%BA%D0%B03/r0/30.46371:50.42383/r1/30.47539:50.5191/" width="745" height="490" scrolling="no" frameborder="0"></iframe>
        <!-- ----------------- -->
    </body>
</html>

For a static map, paste the copied code on your website page in the src attribute of the img tag in the place where you would like to add the map. Below is an example of your page code with an added static map:

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    </head>
    <body>
        <!-- Copied link code in the src attribute of the img tag -->
        <img src="https://maps.visicom.ua/en/image/planet3?z=12&c=30.55607,50.4527&s=800x500&style=base_ru&m1=30.49152,50.46515&m2=30.62336,50.46209&m3=30.59521,50.47848&m4=30.45994,50.4188&m5=30.46131,50.46319" />
        <!-- ----------------------------------------------- -->
    </body>
</html>