Как стилизовать балун в google api maps?

Question

[rizmaster]

Очень срочно надо стилизовать балуны как на рисунке, я их вывел, но никак не могу отредактировать.
Заранее благодарю

Answer 1

[Никита]

Задача решается через ж )
Пример с сайта

function initMap() {

    var g_map = new google.maps.Map(
        document.getElementById("map"),
        {
          zoomControlOptions: {
            position: google.maps.ControlPosition.LEFT_CENTER,
          },
          disableDefaultUI: true,
          scrollwheel: false,
          center: mapPoints[0].coordinatesPoint,
          zoom: 16,
        }
      );

      var infowindow;

      function drawWindow(elem,gmap){

        if (infowindow != undefined) {
          infowindow.close();
        }

        infowindow = new google.maps.InfoWindow({
          content: '<div class="gmap-pin clearfix">\
                      <h4 >'+ elem.name + '</h4>\
                      <img src="/local/templates/lab/assets/img/mark_map.svg" class="pull-left" />\
                      <p>'+elem.text+'</p>\
                      <div class="arrow"></div>\
                    </div>',
      		position: elem.coordinatesPoint,
      		map: gmap,
        });

        g_map.panTo(new google.maps.LatLng(elem.coordinatesPoint.lat, elem.coordinatesPoint.lng));

        google.maps.event.addListener(infowindow, 'domready', function() {
           var iwOuter = $('.gm-style-iw');
           iwOuter.parent().parent().css({top: '40px'});
           iwOuter.prev().hide();
           iwOuter.next().hide();
        });
      }

      drawWindow(mapPoints[0], g_map);

      $('#go-map-hall-1').on('click',function(){
        drawWindow(mapPoints[0], g_map);
      });

      $('#go-map-hall-2').on('click',function(){
        drawWindow(mapPoints[1], g_map);
      })

  }

Главное накинуть класс, в этом случае накидывается .gm-style-iw и от него все верстается и скрывается.

Делал на основе этой заметки

Так же под такую задачу есть готовые решения, их уже надо поискать

Comments

[rizmaster]

ну вот я делал примерно как и ты, также накидывал, но у меня почему-то появляется вокруг еще рамка, я не понимаю что и откуда, ниже сейчас скину код как я делаю может покажешь куда смотреть и что не так

[Никита]

rizmaster: prntscr.com/e8zejh (Скрин) Там просто скрыт корневой контейнер

[rizmaster]

Никита: кажется все получается, спасибо, добрый человек, спас *большойпалец*

Answer 2

[rizmaster]

function initMap() {
    var myLatLng = { lat: 55.668130, lng: 37.517922 };
    var myLatLngW = { lat: 55.654391, lng: 37.587731 };
    var myLatLngS = { lat: 55.836947, lng: 37.343976 };
    // Create a map object and specify the DOM element for display.
    // Create a map object and specify the DOM element for display.
    var map = new google.maps.Map(document.getElementById('map'), {
        center: myLatLng,
        scrollwheel: false,
        styles: styleArrayContacts,
        zoom: 10
    });
    var map = new google.maps.Map(document.getElementById('map'), {
        center: myLatLngW,
        scrollwheel: false,
        styles: styleArrayContacts,
        zoom: 10
    })
    var map = new google.maps.Map(document.getElementById('map'), {
        center: myLatLngS,
        scrollwheel: false,
        styles: styleArrayContacts,
        zoom: 10
    })
    var image = new google.maps.MarkerImage('img/marker.png',
        new google.maps.Size(20, 32),
        new google.maps.Point(0, 0),
        new google.maps.Point(0, 32));

    var contentString1 =
        '<p style="color: #000;"><b>Uluru</b>, also referred to as <b>Ayers Rock</b>, is a large ' +
        'sandstone rock formation in the southern part of the ' +
        'Northern Territory, central Australia. It lies 335&#160;km (208&#160;mi) ' +
        'south west of the nearest large town, Alice Springs; 450&#160;km ' +
        '(280&#160;mi) by road. Kata Tjuta and Uluru are the two major ' +
        'features of the Uluru - Kata Tjuta National Park. Uluru is ' +
        'sacred to the Pitjantjatjara and Yankunytjatjara, the ' +
        'Aboriginal people of the area. It has many springs, waterholes, ' +
        'rock caves and ancient paintings. Uluru is listed as a World ' +
        'Heritage Site.</p>';

    var infowindow1 = new google.maps.InfoWindow({
        content: contentString1
    });
    var contentString2 =
        '<p style="color: #000;"><b>Uluru</b>, also referred to as <b>Ayers Rock</b>, is a large ' +
        'sandstone rock formation in the southern part of the ' +
        'Northern Territory, central Australia. It lies 335&#160;km (208&#160;mi) ' +
        'south west of the nearest large town, Alice Springs; 450&#160;km ' +
        '(280&#160;mi) by road. Kata Tjuta and Uluru are the two major ' +
        'features of the Uluru - Kata Tjuta National Park. Uluru is ' +
        'sacred to the Pitjantjatjara and Yankunytjatjara, the ' +
        'Aboriginal people of the area. It has many springs, waterholes, ' +
        'rock caves and ancient paintings. Uluru is listed as a World ' +
        'Heritage Site.</p>';

    var infowindow2 = new google.maps.InfoWindow({
        content: contentString2
    });
    var contentString3 =
        '<p style="color: #000;"><b>Uluru</b>, also referred to as <b>Ayers Rock</b>, is a large ' +
        'sandstone rock formation in the southern part of the ' +
        'Northern Territory, central Australia. It lies 335&#160;km (208&#160;mi) ' +
        'south west of the nearest large town, Alice Springs; 450&#160;km ' +
        '(280&#160;mi) by road. Kata Tjuta and Uluru are the two major ' +
        'features of the Uluru - Kata Tjuta National Park. Uluru is ' +
        'sacred to the Pitjantjatjara and Yankunytjatjara, the ' +
        'Aboriginal people of the area. It has many springs, waterholes, ' +
        'rock caves and ancient paintings. Uluru is listed as a World ' +
        'Heritage Site.</p>';

    var infowindow3 = new google.maps.InfoWindow({
        content: contentString3
    });


    var image = new google.maps.MarkerImage('img/marker.png',
        new google.maps.Size(20, 32),
        new google.maps.Point(0, 0),
        new google.maps.Point(0, 32));

    var marker1 = new google.maps.Marker({
        map: map,
        icon: image,
        position: myLatLng,
    });

    var marker2 = new google.maps.Marker({
        map: map,
        icon: image,
        position: myLatLngW,
    });
    var marker = new google.maps.Marker({
        map: map,
        icon: image,
        position: myLatLngS,
    });
    marker1.addListener('click', function() {
        infowindow1.open(map, marker1);
    });
    marker2.addListener('click', function() {
            infowindow2.open(map, marker2);
        });
    marker3.addListener('click', function() {
        infowindow3.open(map, marker3);
    });

    google.maps.event.addListener(infowindow, 'domready', function() {

        var iwOuter = $('.gm-style-iw');
        iwOuter.parent().parent().css({ top: '10px' });
        iwOuter.prev().hide();
        iwOuter.next().hide();
    });
}