Home Статьи о ГБО Добавление карты газовых заправок в свой сайт
 
Добавление карты газовых заправок в свой сайт
(3 голоса, среднее 3.67 из 5)
Автор: Stehlen   
15.02.2011 20:05

Отвечаю на вопрос Алексея, заданного в комментариях к карте газовых заправок, метан

Встройка кода карты на свою веб страницу

Каждый желающий может встроить к себе на сайт карту газовых заправок от gazmap.ru.

Для этого нужно:

1. Заполнить форму получения API-ключа по ссылке.

2. Вставить на свой сайт код карты:

A) Для вставки карты пропановых заправок

 


В HEAD

<script src="http://api-maps.yandex.ru/1.1/index.xml?key=AEmCC00BAAAABseifwIAm6G-r3mtnAmG2Y0hU0SiEfI6q8EAAAAAAAAAAADugaTsJhzPstFty18kkWt26VlxuA==" type="text/javascript"></script>

<script type="text/javascript">

window.onload = function () {
var map = new YMaps.Map(document.getElementById("YMapsID"));
map.setCenter(new YMaps.GeoPoint(45.040833 ,53.187671), 10);

map.addControl(new YMaps.TypeControl());
map.addControl(new YMaps.ToolBar());
map.addControl(new YMaps.Zoom());
map.addControl(new YMaps.MiniMap());
map.addControl(new YMaps.ScaleLine());
map.addControl(new YMaps.SearchControl());    
map.enableScrollZoom();
map.removeAllOverlays();


var ml = new YMaps.YMapsML( 'http://gazmap.ru/maps/lpg.php' );
map.addOverlay(ml); var ml = new YMaps.YMapsML( 'http://gazmap.ru/maps/lpg_1.php' ); 
map.addOverlay(ml); var ml = new YMaps.YMapsML( 'http://gazmap.ru/maps/lpg_2.php' ); 
map.addOverlay(ml);
YMaps.Events.observe(ml, ml.Events.Fault, function (error) {
alert('Ошибка: ' + error);
});


}
</script>

 

В BODY

<!-- YMapsID -->
<div id="YMapsID" style="width:550px;height:650px"></div>
<a  href="http://gazmap.ru/karti/gazovie-zapravki-propan-na-karte" target="_blank"><img src="http://gazmap.ru/maps/gazmap_copyright.png" alt="Перейти карту газовых заправок gazmap.ru" style="margin: 2px;"></a>


Б) Для вставки карты метановых заправок

В HEAD

<script src="http://api-maps.yandex.ru/1.1/index.xml?key=AEmCC00BAAAABseifwIAm6G-r3mtnAmG2Y0hU0SiEfI6q8EAAAAAAAAAAADugaTsJhzPstFty18kkWt26VlxuA==" type="text/javascript"></script>

<script type="text/javascript">

window.onload = function () {
var map = new YMaps.Map(document.getElementById("YMapsID"));
map.setCenter(new YMaps.GeoPoint(45.040833 ,53.187671), 5);

map.addControl(new YMaps.TypeControl());
map.addControl(new YMaps.ToolBar());
map.addControl(new YMaps.Zoom());
map.addControl(new YMaps.MiniMap());
map.addControl(new YMaps.ScaleLine());
map.addControl(new YMaps.SearchControl());    
map.enableScrollZoom();
map.removeAllOverlays();

var ml = new YMaps.YMapsML( 'http://gazmap.ru/maps/cng.php' );
map.addOverlay(ml);
YMaps.Events.observe(ml, ml.Events.Fault, function (error) {
alert('Ошибка: ' + error);
});


}
</script>

В BODY

<!-- YMapsID -->
<div id="YMapsID" style="width:550px;height:650px"></div>
<a  href="http://gazmap.ru/karti/gazovie-zapravki-metan-na-karte" target="_blank"><img src="http://gazmap.ru/maps/gazmap_copyright.png" alt="Перейти карту газовых заправок gazmap.ru" style="margin: 2px;"></a>


  • Замените ключ, выделен зеленым, на ключ полученный по ссылке выше.
  • Измените под свою страницу размер карты в строке выделенной синим.
  • При добавлении карты на свой сайт - ОБРАТНАЯ ССЫЛКА ОБЯЗАТЕЛЬНА! НЕ МЕНЯЙТЕ ЧАСТЬ КОДА С КОПИРАЙТОМ!


Вопросы по процедуре добавления задавайте в комментариях, либо (что удобнее) на форуме

Перейти на форум


Обновлено 28.07.2011 22:55
 
Сообщить о ошибке

Комментарии  

 
+1 #6 Обвесим 21.01.2015 11:09
А на собственном движке - это реализуемо или только известные cms&
 
 
+1 #5 Stehlen 21.01.2012 08:15
Цитирую Петр:
Спасибо за совет! Но я так понимаю что тогда не будет явно видно какая заправка метановая, а какая пропановая. А буде видно только по щелчку...
Но думаю что так и придется сделать!

Там иконки разного цвета, но разница видна только при приближении. Могу сделать совсем разные иконки. Или например метановые (так как их меньше) увеличить в размере.
 
 
+1 #4 Петр 20.01.2012 22:56
Цитирую Stehlen:
Цитирую Петр:
Доброго времени суток!
Подскажите, хочу запихнуть две карты на одну страницу. Не выходит :( Я уже и ID им разные задал - все бестолку. Все равно показывает только одну карту, хотя фрейм под вторую исправно создается.

У меня тоже не получается это сделать. Возможно политика Яндекс. Могу предложить только сделать две страницы, или объеденить все точки в одну страницу как здесь - http://gazmap.ru/karti/gazovie-zapravki-obschaya-karta
Для этого к пропановому коду добавить строку
var ml = new YMaps.YMapsML( 'http://gazmap.ru/maps/cng.php' );
map.addOverlay(ml);


Спасибо за совет! Но я так понимаю что тогда не будет явно видно какая заправка метановая, а какая пропановая. А буде видно только по щелчку...
Но думаю что так и придется сделать!
 
 
+1 #3 Stehlen 19.01.2012 13:50
Цитирую Петр:
Доброго времени суток!
Подскажите, хочу запихнуть две карты на одну страницу. Не выходит :( Я уже и ID им разные задал - все бестолку. Все равно показывает только одну карту, хотя фрейм под вторую исправно создается.

У меня тоже не получается это сделать. Возможно политика Яндекс. Могу предложить только сделать две страницы, или объеденить все точки в одну страницу как здесь - http://gazmap.ru/karti/gazovie-zapravki-obschaya-karta
Для этого к пропановому коду добавить строку
var ml = new YMaps.YMapsML( 'http://gazmap.ru/maps/cng.php' );
map.addOverlay(ml);
 
 
+1 #2 Петр 19.01.2012 00:25
Доброго времени суток!
Подскажите, хочу запихнуть две карты на одну страницу. Не выходит :( Я уже и ID им разные задал - все бестолку. Все равно показывает только одну карту, хотя фрейм под вторую исправно создается.
 
 
+1 #1 Stehlen 28.07.2011 23:14
Обновилась часть кода для карты пропановых заправок.
 
 
Сообщить о ошибке

На форуме