Все технические форумы на одном сайте Удобный поиск информации с популярных форумов в одном месте
Вопрос: Гугл-карта и ее zoom

Использую на сайте вывод гугл-карты через
<iframe src="https://www.google.com/maps/embed...">...</iframe>
Как мне отключить ее уменьшение/увеличение при скролле через колесико мыши? На планшетах и смартфонах вообще не удобно...
У яндекс.карты такого нет, но она мне не подходит по другим причинам.
Ответ:
iframe {
   pointer-events: none;
}
Вопрос: Кто работал с гугл картами апи помогите

Всем привет!
Есть страница хтмл, вот код!
______________________________________-



<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
 <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>карта</title> 
 <script src="http://maps.google.com/maps?file=api&amp;v=3" type="text/javascript"></script>
 <script type="text/javascript">
 function initialize() {
 if (GBrowserIsCompatible()) {
 var map = new GMap2(document.getElementById("map_canvas")); 
 map.setCenter(new GLatLng(59.94, 30.3), 13);
 }
 } 
 </script> 
 </head> 
 <body onload="initialize()" onunload="GUnload()"> 
 <div id="map_canvas" style="width: 500px; height: 300px"></div>
 </body>
 </html> 


_______________________________________________________

это страница выводит гугл карту
и показывает на ней место  
согласно заданым координатам
map.setCenter(new GLatLng(59.94, 30.3), 13);


мне очень нужно сделать форму поиска, куда я ввожу город и его показывает на карте, подскажите пожалуйста кто работал с гугл картами, как это реализовать какие правки нужно внести в существующий код?

Ответ:
Всем привет!
Есть страница хтмл, вот код!
______________________________________-



<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
 <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>карта</title> 
 <script src="http://maps.google.com/maps?file=api&amp;v=3" type="text/javascript"></script>
 <script type="text/javascript">
 function initialize() {
 if (GBrowserIsCompatible()) {
 var map = new GMap2(document.getElementById("map_canvas")); 
 map.setCenter(new GLatLng(59.94, 30.3), 13);
 }
 } 
 </script> 
 </head> 
 <body onload="initialize()" onunload="GUnload()"> 
 <div id="map_canvas" style="width: 500px; height: 300px"></div>
 </body>
 </html> 


_______________________________________________________

это страница выводит гугл карту
и показывает на ней место  
согласно заданым координатам
map.setCenter(new GLatLng(59.94, 30.3), 13);


мне очень нужно сделать форму поиска, куда я ввожу город и его показывает на карте, подскажите пожалуйста кто работал с гугл картами, как это реализовать какие правки нужно внести в существующий код?

Вопрос: подгрузка страниц AJAX и гугл карта, карта не подгружается

Помогите пожалуйста! , у меня все содержимое страничек сайта подгружается динамически с помощью AJAX. Тоесть я выбираю в меню "Контакты" или "Портфолио", и сайт не обновляется а просто в контейнере меняется содержимое.
1 в 1 как в
то есть у меня в div блок все подгружается
<div id="content"> <!--содержимое --> </div>

И тут такая проблемма, я вставил на страничку "Контакты" гугл карту, если открыть страницу "Контакты" напрямую, тоесть "..\testweb\contact.html" то карта работает, но если перейти на другую страницу к примеру "Портфолио" а потом обратно в "Контакты" то карта перестает работать (вообще не отображается) что бы она загрузилась нужно в браузере обновить страницу.. (если на сайт перейте с index.html и перейти на вкладку "Контакты" с гугл картой то само собой она то же не отображается) И вот вопрос, что нужно дописать в скрипте что бы содержимое с картой обновлялось?
Карту я взял от сюда -
(как я написал выше, когда она не отображаеться то просто розовый фон)
Ну и код целиком
<div id="content">
            <div id="page">
        <div class="gMap-holder" id="map_canvas"></div>
<script type="text/javascript">
            function loadScript() {
                var script = document.createElement("script");
                script.type = "text/javascript";
                script.src = "http://maps.googleapis.com/maps/api/js?sensor=true&callback=initializeMap"  ;
                document.body.appendChild(script);
            }
            if (window.addEventListener) window.addEventListener("load", loadScript, false);
            else if (window.attachEvent) window.attachEvent("onload", loadScript);
 
            function initializeMap(){
                var myLatlng = new google.maps.LatLng(44.948498, 34.088227);
                var myOptions = {
                    zoom: 17,
                    scrollwheel: false,
                    center: myLatlng,
                    mapTypeId: google.maps.MapTypeId.ROADMAP,
                    mapTypeControlOptions: {
                        position: google.maps.ControlPosition.BOTTOM_LEFT
                    }
                }
                var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
 
                var markerImage = new google.maps.MarkerImage(
                        'images/bg-num.png',
                        new google.maps.Size(33,33),
                        new google.maps.Point(0,0),
                        new google.maps.Point(0,33)
                );
                var markerImageHover = new google.maps.MarkerImage(
                    'images/bg-num.png',
                    new google.maps.Size(33,33),
                    new google.maps.Point(0,33),
                    new google.maps.Point(0,33)
                );
 
                var marker = new google.maps.Marker({
                    icon: markerImage,
                    position: myLatlng, 
                    map: map,
                    title:"test-CRIMEA"
                });
 
                var content = document.createElement('div');
                content.innerHTML = "<strong>Мояковского,12</strong>CRIMEA";
                var infowindow = new google.maps.InfoWindow({
                  content: content
                });
 
                google.maps.event.addListener(marker, 'click', function() {
                    infowindow.open(map, marker);
                });
 
                google.maps.event.addListener(marker, 'mouseover', function() {
                    marker.setIcon(markerImageHover);
                });
 
                google.maps.event.addListener(marker, 'mouseout', function() {
                    marker.setIcon(markerImage);
                });
            }
        </script>
</div>
    </div>
Ответ: возможно причина в том что к ккарте просто не прилетает событие window.load? его же не происходит при динамической подкгузке содержимого.
Вопрос: Как убрать прокрутку для Яндекс и Гугл карт?

Привет!
Собственно вопрос в названии темы.
Часто бывает так, что прокручиваешь колесом мышки страничку, натыкаешься мышкой на карту и прокрутка останавливается. Начинается уменьшение карты. По моему называется скролинг?
Как устранить этот момент? Есть пример с устранённым скролингом, по запросу могу выложить!
Ответ: tvskit
Да - обычный стандартный скрипт Я.Карты норм. Тут программист у меня что-то наплёл из API
чуть позже FireBug гляну что и выложу.
В принципе уже посоветовали:
<script type="text/javascript">
myMap.behaviors.disable('scrollZoom');
</script>
может и это подойдёт - map.behaviors.disable('drag');
посмотрим.
Для Гугл карты с использованием API - scrollwheel: false,
Вопрос: Выключение гугл-карты

Такая ситуация:

На страничке есть гугл-карта. Хочу сделать кнопку, которая будет деактивировать её (чтобы карта оставалась в том же положении, но не реагировала на нажатия мыши/прокрутку колёсика).

disabled=true не помогает. Всё чего добился - поставил scrollwheel: false, чтобы карта не реагировала на колёсико.
Ответ: Гугление на англ. языке отправило меня сюда, где я нашел решение



Тему можно закрывать (сам спросил, сам ответил)
Вопрос: Как добавить карту на страницу контактов?

Joomla 3.
Как добавить яндекс-карту (на крайняк гугл-карту) на страницу стандартного компонента контактов?
Ну или посоветуйте, пожалуйста, альтернативный плагин.
Спасибо.
Ответ: Есть контентный плагин, по крайней мере гугл карты, яндекс не интересовал не когда. Ну и в контактной форме есть текстовое поле описания, туда и вставляем вставку этого плагина с данными. Смотрите в расширениях что то вроде Googlemap.
Вопрос: Подскажите, как задать адаптивность Яндекс и Гугл картам на сайте?

Добрый день всем. Закончил недавно делать сайт, вроде все нормально работает, но вот только с адаптивностью карт местностей беда.
В разделе сайта координаты - есть карта как к нам проехать, как нас найти.
На дескоптных устройствах все вроде отображается, на мобильных телефонах начинается лажа, не видно полностью карту, плюс она сплющивается. Подскажите, что делать?
Заранее спасибо.
Ответ: Здравствуйте. Посмотрел на вашу карту. В браузере отображается нормально. А то что "болун" при уменьшении экрана съезжает, то это из-за того что на сайт карта добавляется в виде скрипта. При уменьшении ширины браузера (для проверки адаптивности например) скрипт не перезагружается и показывает изображение с первоначальными пропорциями. Если открывать сайт на устройстве с соответствующим экраном то должно все быть корректно.
Поправьте меня, если я чего-то не понял)
Вопрос: Програмно добавить маркер к инетактивной карте Google

Всем доброго времени суток,

Стало интересно узнать, как пишутся плагины для WordPress, а потому нашёл несколько обучающих уроков от "Web4myself", где автор достаточно подробно объясняет, как пишется плагин "Google карта", который, затем, можно установить на сайте и использовать.
Используется плагин при помощи шорткода вот такого вида: [map cords1="50.447312" cords2="30.526511" zoom="17], где "coords1", "coords2" - это координаты долготы и широты, а "zoom" - уровень детализации (чем больше значение, тем более детализированно). Всё, что нужно пользователю, это подставить свои координаты долготы и широты в шорткод и будет выведена карта нужной местности, скажем так.
И вроде всё хорошо с самим плагином, вот только автор, почему-то, не посчитал нужным реализовать то, что такие карты, как правило, используют маркеты, чтоб наглядно показать, где находится нужное место (допустим, офис компании или дом нужного человека). То есть автор не реализовал маркер для такой карты.

Выкладываю PHP и JS код плагина

Файл "wfm-maps-2.php":

PHP
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
<?php
/*
Plugin Name: Карты Google v.2
Description: Пример шорткода: [map cords1="50.447312" cords2="30.526511" zoom="17"]
Plugin URI: http://webformyself.com
Author: Андрей
Author URI: http://webformyself.com
*/
 
add_shortcode( 'map', 'wfm_map_2' );
$wfm_maps_array = array();
 
function wfm_map_2($atts){
    global $wfm_maps_array;
    print_r($atts);
    $atts = shortcode_atts(
        array(
            'cords1' => 50.447312,
            'cords2' => 30.526511,
            'zoom' => 8
        ), $atts
    );
 
    extract($atts);
    $wfm_maps_array = array(
        'zoom' => $zoom,
        'cords1' => $cords1,
        'cords2' => $cords2
    );
 
    add_action( 'wp_footer', 'wfm_styles_scripts' );
    return '<div id="map-canvas" style="width: 650px; height: 400px;"></div>';
}
 
function wfm_styles_scripts(){
    global $wfm_maps_array;
    wp_register_script( 'wfm-maps-google', 'http://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false' );
    wp_register_script( 'wfm-maps-2', plugins_url( 'wfm-maps-2.js', __FILE__ ) );
 
    wp_enqueue_script( 'wfm-maps-google' );
    wp_enqueue_script( 'wfm-maps-2' );
 
    wp_localize_script( 'wfm-maps-2', 'wfmObj', $wfm_maps_array );
}
Файл "wfm-maps-2.js":

Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
var map; 
 
function initialize() {
    var mapOptions = {
        center: new google.maps.LatLng(wfmObj.cords1, wfmObj.cords2),
        zoom: +wfmObj.zoom,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    map = new google.maps.Map(document.getElementById("map-canvas"),
    mapOptions);
}
 
google.maps.event.addDomListener(window, 'load', initialize);
Быть может кто-нить может пояснить, как написать маркер для плагина?

П.С. Ища в интернете, я наткнулся на документацию по Гугл картам, где описывается реализация маркера: , вот только не могу разобраться, как реализовать (подогнать) данный там код под JS плагина. Иными словами, куда именно в JS втсавлять данный ниже код и что писать в "position":

Javascript
1
2
3
4
5
var marker = new google.maps.Marker({
    position: center, // Здесь, как я понимаю, должна быть переменная "center", потому как в ней указываюся координаты
    map: map,
    title: 'Мы находимся здесь!'
  });
Заранее благодарю за помощь.

Добавлено через 12 часов 59 минут
Доброго времени суток,

Пробовал сделать по документации Гугл, однако маркер всё равно не появляется на карте. Да и сама карта перестала отображаться.

Привожу ниже код реализации:

Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
var map; 
function placeMarker(position, title) {
    var marker = new google.maps.Marker({
        position: position,
        map: map,
        title: title
   });
function initialize() {
    var mapOptions = {
        position: new google.maps.LatLng(wfmObj.cords1, wfmObj.cords2),
        zoom: +wfmObj.zoom,
        mapTypeId: google.maps.MapTypeId.ROADMAP
        placeMarker(position, 'Мы находимся здесь.');
    };
 
}
 
google.maps.event.addDomListener(window, 'load', initialize);
Ответ: Проблема решена. Выкладываю JS код, быть может кому-то пригодится.

Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
var map; 
var marker;
//можно было в функции проинициализировать, но вдруг где-то ещё пригодится. 
//Здесь значение переменной - ссылка на маркер, который слепил в фотошопе. 
//На карте будет обображаться не стандартный маркер, а кастомный.
var image = 'http://i.imgur.com/yHsnhjE.png';
function initialize() {
// Получаем координаты и уровень детализации каарты, которые юзер ввёл в шорткоде, и выводим по ним карту местности.
        var myLatLng = new google.maps.LatLng(wfmObj.cords1, wfmObj.cords2);
    var mapOptions = {
        center: myLatLng,
        zoom: +wfmObj.zoom,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    map = new google.maps.Map(document.getElementById("map-canvas"),
    mapOptions);
//Формируем нужный текст в инфобоксе. При нажатии на расположенный на карте маркер, выскочит заданный здесь текст.
    var contentString = '<div id="content">'+
         '<div id="siteNotice">'+
         '</div>'+
// Поскольку ифноблок - это div блок, можно применить к нему различное оформление. 
// Например, задать в качестве заголовка изображение при помощи тега <img src="URL">
         '<h1 id="firstHeading" class="firstHeading">Заголовок</h1>'+
         '<div id="bodyContent">'+
         '<p><b>Мы находимся здесь: </b> Село Кукуево 85</p>'+
         '</div>'+
         '</div>';
    var infowindow = new google.maps.InfoWindow({
      content: contentString
    });
// Маркер, который будет выводится на карте
        marker = new google.maps.Marker({
                position: myLatLng,
                map: map,
// Можно убрать title вообще, он не особо нужен.
                title: 'Текст, который выведится при наведении курсора на маркер',
// Кастомная иконка меркера
                icon: image
        });
        marker.addListener('click', function() {
                infowindow.open(map, marker);
        });
// При наведении курсора на маркер, он булет анимирован, начнёт подпрыгивать.    
        marker.addListener('mousemove', toggleBounce);
// Собственно, функция самой анимации.
}
function toggleBounce() {
  if (marker.getAnimation() !== null) {
    marker.setAnimation(null);
  } else {
    marker.setAnimation(google.maps.Animation.BOUNCE);
  }
}
         
google.maps.event.addDomListener(window, 'load', initialize);
Вопрос: Как грамотно установить карту на сайт?

Друзья специалисты расскажите подробнее, как можно установить карту (google) на сайт?
Пробовал плагины (правда только пару), нужного результата увы не достиг.
А результат хочется такой:
Скролиться (зуммироваться) должна только после клика по ней!!!
Вычитал, что можно
В гугл картах нужно свойству scrollwheel объекта MapOptions присвоить false, чтобы при прокручивании колесиком не зумировалось.
Но о чем идет речь вообще, ни как не могу понять.

Добавлено через 10 минут
Я добавлял карту с помощью шорткода [su_gmap].
Вообще не представляю где искать scrollwheel
Ответ: На Ваш вопрос уже ответили. Заходите в админку - в страницу "контакты", выбираете вкладку "текст" и копируете туда код карты, который Вы указали в первом своем сообщении, а именно
HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
 <div id="map"></div>
    <script>
 
var map;
function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
    center: {lat: -34.397, lng: 150.644},
    zoom: 8
  });
}
 
    </script>
    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDwsiy66e-qCrh5EH2w9HunERrWTbJWs14&callback=initMap"
        async defer></script>
и будет Вам счастье.
А хотя нет не будет, возможно вся проблема в том что у вас скрипт вызывающий карту прописан за пределами <div class="map>
Попробуйте так
HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
 <div id="map"><script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDwsiy66e-qCrh5EH2w9HunERrWTbJWs14&callback=initMap"
        async defer></script></div>
    <script>
var map;
function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
    center: {lat: -34.397, lng: 150.644},
    zoom: 8
  });
}
 
    </script>
    
Но хотя я могу ошибаться, то же с api гугла не работал, в основе с яндексом.
Вопрос: zoom jquery на сайте

http://шуба-мф.рф/index.php?...60&It emid=68
Кто может знать как сделать так что бы при перелючении картинки, в окне зума отображалась выбранная картинка, а не всегда первая.
http://www.elevateweb.co.uk/image-zoom/examples - страница плагина
Ответ: psfdek,
никак в гугле забанили ?
http://www.tripwiremagazine.com/2013...mage-zoom.html