Карта Google с несколькими местоположениями в html с использованием javascript при нажатии кнопки, как одновременно появиться маркер и информационное окно

avatar
Kh.Mubashar Irshad
8 апреля 2018 в 05:05
467
1
0

Я хочу интегрировать карту Google в HTML с несколькими местоположениями. Проблема в том, что когда я нажимаю кнопку местоположения, местоположение меняется, и маркер появляется в точке, но информационное окно не появляется на маркере. когда я нажимаю на маркер, информационное окно появляется во всплывающем окне. Поэтому мне нужно, когда я нажимаю кнопку selecteor, маркер и информационные окна появляются сразу, и карта должна быть увеличена. для справки прилагаются изображения Javascript и HTML, пожалуйста, помогите, как я могу это сделать?

<div class="col-sm-1hlaf col-md-1half text-left" style="padding-left: 0px; margin-top:20px;"> 
<h3 style="font-size: 2rem; color: #ffffff; font-weight: bold; margin-bottom:  2px;"> Head Office</h3> 
<button type="button" class="btn btn-link" id="abudhabi">Abu Dhabi, UAE


var map;
    function initialize() {        
        map = new google.maps.Map(document.getElementById('map-canvas'), {
          zoom: 18,
          center: new google.maps.LatLng(24.4850983,54.3645303)
      });        
    }
    function newLocation(newLat,newLng)
    {
        map.setCenter({ lat : newLat,  lng : newLng,});
        var marker = new google.maps.Marker({
           position: new google.maps.LatLng(newLat,newLng), map: map, });
        var contentString =           
        '<h3 >Uluru</h3>'+   
        '<p >Abcedeer</p>'+         
        '</div>';
        var infowindow = new google.maps.InfoWindow({ content: contentString });      
        marker.addListener('click', function() { infowindow.open(map, marker); });
    }
    google.maps.event.addDomListener(window, 'load', initialize);
//Setting Location with jQuery
$(document).ready(function ()
{
    $("#abudhabi").on('click', function () {newLocation(24.4850983,54.3645303);});
    $("#dubai").on('click', function (){newLocation(25.1148601,55.1949989);});

    $("#ksa").on('click', function () {newLocation(25.2642846,51,5155031);});

    $("#jordan").on('click', function (){newLocation(31.8360368,35.6674318); });
    $("#Seychelles").on('click', function (){newLocation(-4.6223488,55.4485224);});
    $("#algeria").on('click', function (){newLocation(36.7538345,3.0534636); });
});
<head>
<link> herf="https://stackpath.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"</link>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBu-916DdpKAjTmJNIgngS6HL_kDIKU0aU&callback=myMap"></script>
</head>
<body>
<div class="col-sm-1hlaf col-md-1half text-left" style="padding-left: 0px; margin-top:20px;"> 
    <h3 style="font-size: 2rem; color: #ffffff; font-weight: bold; margin-bottom:  2px;"> Head Office</h3> 
    <button type="button" class="btn btn-link" id="abudhabi">Abu Dhabi, UAE</button>
    <h3 style="font-size: 2rem; color: #ffffff; font-weight: bold; margin-bottom:  2px;"> Regional Offices</h3>
    <button type="button" class="btn btn-link" id="dubai">Dubai</button><br/>
    <button type="button" class="btn btn-link" id="ksa">KSA</button><br/>
    <button type="button" class="btn btn-link" id="jordan">Jordan</button><br/>
    <button type="button" class="btn btn-link" id="Seychelles">Seychelles</button><br/>
    <button type="button" class="btn btn-link" id="algeria">Algeria</button> <br/>
    <button type="button" class="btn btn-map btn-sm" onclick="openWin()" value="print a map" style="margin-top:54px;">Print Map</button>   
</div>
<div class="col-md-6 col-sm-6" id="myMap">
    <div style="width:100%; height:345px; margin: 40px 0 0 0;" id="map-canvas"></div>
</div> 
</body

Региональные офисы Дубай
КСА
Джордан
Сейшелы
Алжир
Печать карты

Источник

Ответы (1)

avatar
Hikarunomemory
8 апреля 2018 в 06:11
0

Вы должны изменить YOUR_API_KEY на свой реальный ключ API, чтобы правильно выполнить следующий пример.

В вашем коде несколько ошибок.

<link> herf="https://stackpath.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"</link>

должен быть

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>



и нет такой функции под названием myMap

<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=myMap"></script>

он установит карту по

google.maps.event.addDomListener(window, 'load', initialize);

итак, просто измените его на

<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"></script>



согласно вашему комментарию, я бы сохранил всю информацию о местоположении в один объект, как показано ниже var Location

и изменить function newLocation 

var map, marker, infowindow;

function initialize() {
  map = new google.maps.Map(document.getElementById('map-canvas'), {
    zoom: 18,
    center: new google.maps.LatLng(24.4850983, 54.3645303)
  });
}

function newLocation(location) {
  map.setCenter({
    lat: location.lat,
    lng: location.lng,
  });

  // if marker exists, remove it from the map
  if (marker)
    marker.setMap(null);

  marker = new google.maps.Marker({
    position: new google.maps.LatLng(location.lat,location.lng),
    map: map,
  });

  var contentString =           
        '<h3 >'+ location.info1 +'</h3>'+   
        '<p >'+ location.info2 +'</p>'+         
        '</div>';

  infowindow = new google.maps.InfoWindow({
    content: contentString
  });

  // immediately open the infowindow
  infowindow.open(map, marker);
}

google.maps.event.addDomListener(window, 'load', initialize);

var Location = {
  abudhabi: {
    lat: 24.4850983,
    lng: 54.3645303,
    info1: 'abudhabi-1',
    info2: 'abudhabi-2'
  },

  dubai: {
    lat: 25.1148601,
    lng: 55.1949989,
    info1: 'dubai-1',
    info2: 'dubai-2'
  },

  ksa: {
    lat: 25.2642846,
    lng: 51.5155031,
    info1: 'ksa-1',
    info2: 'ksa-2'
  },

  jordan: {
    lat: 31.8360368,
    lng: 35.6674318,
    info1: 'jordan-1',
    info2: 'jordan-2'
  },

  Seychelles: {
    lat: -4.6223488,
    lng: 55.4485224,
    info1: 'Seychelles-1',
    info2: 'Seychelles-2'
  },

  algeria: {
    lat: 36.7538345,
    lng: 3.0534636,
    info1: 'algeria-1',
    info2: 'algeria-2'
  },
}

//Setting Location with jQuery
$(document).ready(function() {
  $("#abudhabi").on('click', function() {
    newLocation(Location.abudhabi);
  });
  $("#dubai").on('click', function() {
    newLocation(Location.dubai);
  });

  $("#ksa").on('click', function() {
    newLocation(Location.ksa);
  });

  $("#jordan").on('click', function() {
    newLocation(Location.jordan);
  });
  $("#Seychelles").on('click', function() {
    newLocation(Location.Seychelles);
  });
  $("#algeria").on('click', function() {
    newLocation(Location.algeria);
  });
});
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"></script>


<div class="col-sm-1hlaf col-md-1half text-left" style="padding-left: 0px; margin-top:20px;">
  <h3 style="font-size: 2rem; color: #ffffff; font-weight: bold; margin-bottom:  2px;"> Head Office</h3>
  <button type="button" class="btn btn-link" id="abudhabi">Abu Dhabi, UAE</button>
  <h3 style="font-size: 2rem; color: #ffffff; font-weight: bold; margin-bottom:  2px;"> Regional Offices</h3>
  <button type="button" class="btn btn-link" id="dubai">Dubai</button><br/>
  <button type="button" class="btn btn-link" id="ksa">KSA</button><br/>
  <button type="button" class="btn btn-link" id="jordan">Jordan</button><br/>
  <button type="button" class="btn btn-link" id="Seychelles">Seychelles</button><br/>
  <button type="button" class="btn btn-link" id="algeria">Algeria</button> <br/>
  <button type="button" class="btn btn-map btn-sm" value="print a map" style="margin-top:54px;">Print Map</button>
</div>
<div class="col-md-6 col-sm-6" id="myMap">
  <div style="width:100%; height:345px; margin: 40px 0 0 0;" id="map-canvas"></div>
</div>
Kh.Mubashar Irshad
8 апреля 2018 в 06:34
0

Спасибо! Уважаемый @hikarunomemory за вашу поддержку, я благодарен вам за поддержку. Немного больше помощи от вас, на самом деле я хочу, чтобы установить адреса каждой кнопки местоположения во всплывающем окне информационного окна. как я могу это изменить?

Kh.Mubashar Irshad
8 апреля 2018 в 07:00
0

Очень Очень Благодарен Вам... Работает Ура! Люблю<3 и ценю вашу любезную поддержку...