Клуб API Карт

Карта со своими метками со списком внизу

axlnik
30 сентября 2014, 12:17

Я в скриптах - 0;

 вот так хочу сделать, но на яндекс карте, пробовал создать шаблон, но получается ерунда полнейшая: Помогите понять, что куда вставлять из песочницы.

 

<?php 

/*

Template Name: Страница контактов с интерактивной Яндекс.Картой

*/ ?>

 

<?php get_header(); ?>

 

        <div id="container">

            <div id="content" role="main">

 

<?php if ( have_posts() ) while ( have_posts() ) : the_post(); ?>

 

                <div id="post-<?php the_ID(); ?>" <?php post_class(); ?>>

                    <h1><?php the_title(); ?></h1>

 

                    <div class="entry-content">

                        <?php the_content(); ?>

 

                        <!-- Скрипт ниже - это код вашей интерактивной карты -->

  <!DOCTYPE html>

 

<html>

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title>Примеры. Размещение карты на странице.</title>

    <!--

        Подключаем API карт

   Если вы используете API локально, то в URL ресурса необходимо указывать протокол в стандартном виде (http://...)

    -->

    <script src="http://api-maps.yandex.ru/2.0/?load=package.standard&lang=ru-RU" type="text/javascript"></script>

 

<script type="text/javascript">

var myMap;

 

// Дождёмся загрузки API и готовности DOM.

ymaps.ready(init);

 

function init () {

    // Создание экземпляра карты и его привязка к контейнеру с

    // заданным id ("map").

    myMap = new ymaps.Map('map', {

        // При инициализации карты обязательно нужно указать

        // её центр и коэффициент масштабирования.

        center: [55.76, 37.64], // Москва

        zoom: 10

    });

 myPlacemark = new ymaps.Placemark(myMap.getCenter(), {

            hintContent: 'Собственный значок метки'

        }, {

            // Опции.

            // Необходимо указать данный тип макета.

            iconLayout: 'default#image',

            // Своё изображение иконки метки.

            iconImageHref: 'http://wwsystem.ru/wp-content/uploads/2014/09/wwsystem32x28.png',

            // Размеры метки.

            iconImageSize: [30, 42],

            // Смещение левого верхнего угла иконки относительно

            // её "ножки" (точки привязки).

            iconImageOffset: [-3, -42]

        });

 

       document.getElementById('destroyButton').onclick = function () {

        // Для уничтожения используется метод destroy.

        myMap.destroy();

    };

 

}

</script>

</head>

 

<body>

<div id="map" style="width:600px; height:450px"></div>

</body>

 

</html>

                    </div><!-- .entry-content -->

 

                </div><!-- #post-## -->

 

<?php endwhile; ?>

 

            </div><!-- #content -->

        </div><!-- #container -->

 

<?php get_sidebar(); ?>

<?php get_footer(); ?>

 

13 комментариев
Подписаться на комментарии к посту

что нам делать с вашим пэхапе?

нужна ссылка на эту страницу.

Извините, но запрашиваемая страница не найдена.

исправил

ошибка в том что у вас нет элемента с id="destroyButton"

Заглядывайте в консоль броузера при разработке, там эту ошибку видно

 

       document.getElementById('destroyButton').onclick = function () {

        // Для уничтожения используется метод destroy.

        myMap.destroy();

    };

 

а этот элемент нужен? а то я эту строчку удалил и улучшений не увидел

Тег  является контейнером, который заключает в себе все содержимое веб-страницы, включая теги  и 

http://htmlbook.ru/html/html

вы вставили весь пример целиком, поэтому не работает

убрал html? А у Вас нет рабочего файла шаблона? я бы может на нем смогбы разобраться где моя ошибка.

и снова:

 

ошибка в том что у вас нет элемента с id="destroyButton"

Заглядывайте в консоль броузера при разработке, там эту ошибку видно

 

       document.getElementById('destroyButton').onclick = function () {
        // Для уничтожения используется метод destroy.
        myMap.destroy();
    };

 

я вроде поправил, но я это сделал переписав  header.php       но я планировал разместить на сайте 3 карты на одной десятки точек, это же какое полотно будет у header.php, а как сделать так, чтобы я настройки местоположения и вида метки прописывал на странице сайта. Тоесть редактирую http://wwsystem.ru/?page_id=3149 а не header.php ???

Вы можете оставить в head только подключение АПИ. А сам код создания карты и добавления меток разместить в body

А ЧТО ИЗ КОДА ПОДКЛЮЧЕНИЕ К АПИ?