Не удается прикрепить окно к маркеру

275
18 сентября 2017, 05:20

Здравствуйте. Подключил карту с помощью гугл апи, прикрепил к нему собственный маркер. Теперь нужно к этому маркеру прикрепить слева окно которое я написал в html и задал стили с в css. Стандартное окно я уже подключал и оно мне не подошло(так как я не мог задать ему стили). Потом удалил все и оставил только карту и маркер. Гдето прочел что с помощью APPEND можно както сделать то что я хочу,но не получилось заставить код работать.

function initMap() { 
      var uluru = {lat: 50.47719458, lng: 30.82746506}; 
      var map = new google.maps.Map(document.getElementById('map'),{ 
        zoom: 14, 
        center: uluru, 
        disableDefaultUI: true, 
        scrollwheel: false 
    }); 
      // Создаем маркер на карте 
      var marker = new google.maps.Marker({ 
      // Определяем позицию маркера 
      position: {lat: 50.477, lng: 30.827},  
      // Указываем на какой карте он должен появится. (На странице ведь может быть больше одной карты) 
      map: map, 
      animation: google.maps.Animation.DROP, 
      // position: {lat: 50.477, lng: 30.827} 
      // Пишем название маркера - появится если навести на него курсор и немного подождать 
      title: 'Группа компаний Фьюжн', 
      // Укажем свою иконку для маркера 
      icon: '../img/marker.png' 
 
      $("#message").appendTo(map.getPane(G_MAP_FLOAT_SHADOW_PANE)); 
    }); 
 }
 html body .main .geo { 
    overflow: hidden; 
    position: relative; 
    background-repeat: no-repeat; } 
    html body .main .geo #map { 
      position: absolute; 
      width: 100%; 
      height: 100%; 
        height-top: 0; 
      height: 385px; 
        height-bottom: 385px; } 
    html body .main .geo #message { 
      position: absolute; 
      padding: 10px; 
      background: #555; 
      color: #fff; 
      width: 75px; 
      display: none; } 
    html body .main .geo .contacts { 
      background-color: #f2932f; 
      opacity: .9; 
      position: relative; 
      text-align: center; 
      padding-bottom: 24px; 
      padding-left: 31px; } 
      html body .main .geo .contacts h1, html body .main .geo .contacts p, html body .main .geo .contacts address { 
        color: #fff; 
        font-family: roboto; 
        text-align: center; } 
      html body .main .geo .contacts h1 { 
        font-size: 50px; 
        line-height: 73px; 
        font-weight: 300; 
        letter-spacing: 0.072em; 
        text-transform: uppercase; 
        padding-top: 61px; 
        margin: 0 0; } 
      html body .main .geo .contacts h1:before { 
        content: " "; 
        text-align: center; 
        height: 1px; 
        width: 65px; 
        background: #FFD9B2; 
        display: block; 
        margin: 0 auto; 
        position: relative; 
        top: -10px; 
        overflow: hidden; } 
      html body .main .geo .contacts p { 
        font-size: 18px; 
        font-weight: 300; 
        letter-spacing: 0.00em; 
        margin-bottom: 17px; } 
      html body .main .geo .contacts address { 
        font-size: 18px; 
        font-weight: 300; 
        letter-spacing: 0.01em; 
        margin-bottom: 19px; } 
    html body .main .geo .contacts:after { 
      content: " "; 
      position: absolute; 
      top: 0; 
      bottom: 0; 
      left: 100%; 
      width: 9999px; 
      background-color: #f2932f; }

Елки палки как тут вставить штмл?

Я даже скопировал код в текстовый документ, а его блин оказывается нельзя прикрепить r сообщению. !!! :(

            .geo
            overflow: hidden
            // height: 385px
            position: relative
            background-repeat: no-repeat
            #map
                position: absolute
                // z-index: 1
                width: 100%
                height: 100%
              top: 0
                height: 385px
            bottom: 385px
            #message
                position: absolute
                padding: 10px
                background: #555
                color: #fff
                width: 75px
                display: none
            // #firstHeading
            //  top: 10em !important
            //  left: 30em !important
//       // position: absolute !important
//       // z-index :1 !important
            //  position: relative !important
            //  float: left
            //  display: inline-block !important 
            //  width: 13% !important
            //  height: 45px !important
            //  background: #fff !important
            //  top: 155 !important
            //  right: 0 !important
            //  bottom: 0 !important
            //  left: 400 !important
            //  h1 
            //      // position: absolute
            //      font-size: 18px !important
            //      color: #f2932f !important
            //      line-height: 45px !important
            //      text-align: center !important
            //      margin-bottom: 0
            //  &:before 
            //      position: absolute
            //      content: " "
            //      text-align: center
            //      // background: #fff
            //      display: block
            //      margin: 0 auto
            //      // position: relative
            //      top: 29px
            //      left: 247px
            //      overflow: hidden
            //      width: 0 !important
            //      height: 0 !important
            //      border-bottom: 8px solid #fff !important
            //      border-right: 15px solid transparent !important


                    // border-bottom: 8px solid #9acd32
                    // border-image-outset: 0
                    // border-image-repeat: stretch
                    // border-image-slice: 100%
                    // border-image-source: none
                    // border-image-width: 1
                    // border-left-color:  #9acd32
                    // border-left-style: solid
                    // border-left-width: 24.6667px
                    // border-right-color: rgba(0,0,0,0)
                    // border-right-style: solid
                    // border-right-width: 24.6667px
                    // border-top-color: rgba(0,0,0,0)
                    // border-top-style: solid
                    // border-top-width: 24.6667px
                    // display: inline-block
                    // height: 0
                    // margin-bottom: 30px
                    // margin-left: 10px
                    // margin-right: 10px
                    // margin-top: 30px
                    // width: 0px



            .contacts
                background-color: #f2932f
                opacity: .9
                position: relative
                // height: 385px
                text-align: center
                padding-bottom: 24px
                padding-left: 31px

                h1,p,address
                    color: #fff
                    font-family: roboto
                    // display: inline-block
                    text-align: center
                h1
                    font-size: 50px
                    line-height: 73px
                    font-weight: 300
                    letter-spacing: 0.072em
                    text-transform: uppercase
                    // margin-top: 250px
                    // margin-bottom: 50px
                    padding-top: 61px
                    margin: 0 0
                h1:before
                    content: " "
                    text-align: center
                    height: 1px
                    width: 65px
                    background: #FFD9B2   
                    display: block
                    margin: 0 auto
                    position: relative
                    top: -10px
                    overflow: hidden
                p 
                    font-size: 18px
                    font-weight: 300
                    letter-spacing: 0.00em
                    margin-bottom: 17px
                address 
                    font-size: 18px
                    font-weight: 300
                    letter-spacing: 0.01em
                    margin-bottom: 19px
            .contacts:after
            content: " "
            position: absolute
            top: 0
            bottom: 0
            left: 100%
            width: 9999px
            background-color: #f2932f

Это был SASS. HTML не получается прислать.

html body .main .geo {
overflow: hidden;
position: relative;
background-repeat: no-repeat; }
html body .main .geo #map {
  position: absolute;
  width: 100%;
  height: 100%;
    height-top: 0;
  height: 385px;
    height-bottom: 385px; }
html body .main .geo #message {
  position: absolute;
  padding: 10px;
  background: #555;
  color: #fff;
  width: 75px;
  display: none; }
html body .main .geo .contacts {
  background-color: #f2932f;
  opacity: .9;
  position: relative;
  text-align: center;
  padding-bottom: 24px;
  padding-left: 31px; }
  html body .main .geo .contacts h1, html body .main .geo .contacts p, html body .main .geo .contacts address {
    color: #fff;
    font-family: roboto;
    text-align: center; }
  html body .main .geo .contacts h1 {
    font-size: 50px;
    line-height: 73px;
    font-weight: 300;
    letter-spacing: 0.072em;
    text-transform: uppercase;
    padding-top: 61px;
    margin: 0 0; }
  html body .main .geo .contacts h1:before {
    content: " ";
    text-align: center;
    height: 1px;
    width: 65px;
    background: #FFD9B2;
    display: block;
    margin: 0 auto;
    position: relative;
    top: -10px;
    overflow: hidden; }
  html body .main .geo .contacts p {
    font-size: 18px;
    font-weight: 300;
    letter-spacing: 0.00em;
    margin-bottom: 17px; }
  html body .main .geo .contacts address {
    font-size: 18px;
    font-weight: 300;
    letter-spacing: 0.01em;
    margin-bottom: 19px; }
html body .main .geo .contacts:after {
  content: " ";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 100%;
  width: 9999px;
  background-color: #f2932f; }

function initMap() { 
  var uluru = { 
    lat: 50.47719458, 
    lng: 30.82746506 
  }; 
  var map = new google.maps.Map(document.getElementById('map'), { 
    zoom: 14, 
    center: uluru, 
    disableDefaultUI: true, 
    scrollwheel: false 
  }); 
  // Создаем маркер на карте 
  var marker = new google.maps.Marker({ 
    // Определяем позицию маркера 
    position: { 
      lat: 50.477, 
      lng: 30.827 
    }, 
    // Указываем на какой карте он должен появится. (На странице ведь может быть больше одной карты) 
    map: map, 
    animation: google.maps.Animation.DROP, 
    // position: {lat: 50.477, lng: 30.827} 
 
 
    // Пишем название маркера - появится если навести на него курсор и немного подождать 
    title: 'Группа компаний Фьюжн', 
    // Укажем свою иконку для маркера 
    icon: '../img/marker.png' 
  }); 
} 
 
 
$("#message").appendTo(map.getPane(G_MAP_FLOAT_SHADOW_PANE));
html body .main .geo { 
  overflow: hidden; 
  position: relative; 
  background-repeat: no-repeat; 
} 
 
html body .main .geo #map { 
  position: absolute; 
  width: 100%; 
  height: 100%; 
  height-top: 0; 
  height: 385px; 
  height-bottom: 385px; 
} 
 
html body .main .geo #message { 
  position: absolute; 
  padding: 10px; 
  background: #555; 
  color: #fff; 
  width: 75px; 
  display: none; 
} 
 
html body .main .geo .contacts { 
  background-color: #f2932f; 
  opacity: .9; 
  position: relative; 
  text-align: center; 
  padding-bottom: 24px; 
  padding-left: 31px; 
} 
 
html body .main .geo .contacts h1, 
html body .main .geo .contacts p, 
html body .main .geo .contacts address { 
  color: #fff; 
  font-family: roboto; 
  text-align: center; 
} 
 
html body .main .geo .contacts h1 { 
  font-size: 50px; 
  line-height: 73px; 
  font-weight: 300; 
  letter-spacing: 0.072em; 
  text-transform: uppercase; 
  padding-top: 61px; 
  margin: 0 0; 
} 
 
html body .main .geo .contacts h1:before { 
  content: " "; 
  text-align: center; 
  height: 1px; 
  width: 65px; 
  background: #FFD9B2; 
  display: block; 
  margin: 0 auto; 
  position: relative; 
  top: -10px; 
  overflow: hidden; 
} 
 
html body .main .geo .contacts p { 
  font-size: 18px; 
  font-weight: 300; 
  letter-spacing: 0.00em; 
  margin-bottom: 17px; 
} 
 
html body .main .geo .contacts address { 
  font-size: 18px; 
  font-weight: 300; 
  letter-spacing: 0.01em; 
  margin-bottom: 19px; 
} 
 
html body .main .geo .contacts:after { 
  content: " "; 
  position: absolute; 
  top: 0; 
  bottom: 0; 
  left: 100%; 
  width: 9999px; 
  background-color: #f2932f; 
}
<!-- begin snippet: js hide: false console: true babel: false -->

Наконец то нашел как вставить код . Спервого раза неувидел. Я вставлял весь код фигурными скобками, а нужно было выбрать пятый значок в навигации.

READ ALSO
foreach выводит лишний элемент [дубликат]

foreach выводит лишний элемент [дубликат]

На данный вопрос уже ответили:

339
Yii2 Как в AccessControl добавить &#39;register&#39; в access?

Yii2 Как в AccessControl добавить 'register' в access?

В backend нужно сделать регистрацию только для админа и контент-менеджераСейчас при попытке пройти по ссылке: 'регистрация нового пользователя'...

752
PHP не работает проверка [требует правки]

PHP не работает проверка [требует правки]

Подскажите пожалуйста почему не работает проверкаОтправляет даже пустые значения

207
Свой генератор псевдослучайных чисел [требует правки]

Свой генератор псевдослучайных чисел [требует правки]

Нужно создать свой генератор псевдослучайных чисел на PHP, который при использовании числа (сида), выдаст от 0 до 65280 (включительно) вот такие...

298