Пользовательская ссылка на карту Google не работает

Question

Пользовательская ссылка на карту Google не работает

Пытаясь заставить мои маркеры указывать на другие страницы. Скопированы ответы из ранее решенных дел. Все еще не работает. Карта с маркерами подходит. Тем не менее, даже названия есть, ссылки не работают. Продолжайте иметь сообщение "Uncaught ReferenceError: маркер не определен". Что я тут не так делаю?? Закончились идеи.
Может кто-нибудь посмотреть, чтобы помочь мне из этого. Гигантское спасибо;

<script 
    src="https://maps.googleapis.com/maps/api/js?language=ko&key=AIzaSyA3WDZ1KfeUb_Q-SxtIRE2wZ4RBieuGl7s"
    type="text/javascript">
</script>
<script>
 function Goog2() {
     var mapCanvas = document.getElementById('Google_map');
     var mapOptions = {
      center: new google.maps.LatLng(45.80257,15.9371),
      zoom: 10,
      mapTypeId: google.maps.MapTypeId.ROADMAP
     }
     var map = new google.maps.Map(mapCanvas, mapOptions);

     var myLatLng0 = new google.maps.LatLng(45.80257,15.9371);
     var myLatLng1 = new google.maps.LatLng(45.805455,15.983761);
     var myLatLng2 = new google.maps.LatLng(45.738822, 16.068278);
     var myLatLng3 = new google.maps.LatLng(45.803816, 15.993573);

    var markers = [];


    markers[0] = new google.maps.Marker({
         position: myLatLng0,
         map: map,
         url: '/cocohouse/location/CH_location_en.html',
         icon: "/images/ariranglogoimage28_2.png",
         title: 'Coco House',
     });
     markers[1] = new google.maps.Marker({
         position: myLatLng1,
         map: map,
         icon: "/images/cocohouse/location/train26.png",
         url:"/cocohouse/location/to_CH3_en.html",
         title: 'Train Terminal',

     });
     markers[2] = new google.maps.Marker({
         position: myLatLng2,
         map: map,
         icon: "/images/cocohouse/location/airport32.png",
         url:"/cocohouse/location/to_CH1_en.html",
         title: 'Airport',
     });
     markers[3] = new google.maps.Marker({
         position: myLatLng3,
         map: map,
         icon: "/images/cocohouse/location/bus26.png",
         url:"/cocohouse/location/to_CH2_en.html",
         title: 'Bus Terminal',
     });
    }
    google.maps.event.addDomListener(window, 'load', Goog2);

    for ( i = 0; i < markers.lenght; i++ ) {
        google.maps.event.addListener(markers[i], 'click', function() {
          window.location.href = this.url; 
        });
    }
</script>

-1

javascript google-maps google-maps-api-3 marker

Источник

user4421211 05 янв '15 в 19:24

3 ответа

Другие вопросы по тегам javascript google-maps google-maps-api-3 marker

user1238965 05 янв '15 в 22:07 2015-01-05 22:07 · Answer 1 · 2015-01-05 22:07

markers.lenght; должен прочесть markers.length;

for (var i=0; i < markers.length; i++) {
    google.maps.event.addListener(markers[i], 'click', function () {
        window.location.href = this.url;
    });
}

markers Необходимо определить, прежде чем использовать его.

Ты звонишь Goog2 при загрузке окна, но ваш цикл выполняется до этого события и до заполнения вашего массива.

user894063 05 янв '15 в 19:46 2015-01-05 19:46 · Answer 2 · 2015-01-05 19:46

Вы используете "маркеры" в контексте, который не определен. 'маркеры' объявлены в функции Goog2 и используются снаружи.

Попробуйте (не проверено):

<script>
  function Goog2() {
     var mapCanvas = document.getElementById('Google_map');
     var mapOptions = {
      center: new google.maps.LatLng(45.80257,15.9371),
      zoom: 10,
      mapTypeId: google.maps.MapTypeId.ROADMAP
     }
     var map = new google.maps.Map(mapCanvas, mapOptions);

     var myLatLng0 = new google.maps.LatLng(45.80257,15.9371);
     var myLatLng1 = new google.maps.LatLng(45.805455,15.983761);
     var myLatLng2 = new google.maps.LatLng(45.738822, 16.068278);
     var myLatLng3 = new google.maps.LatLng(45.803816, 15.993573);
    var markers = [];
    markers[0] = new google.maps.Marker({
         position: myLatLng0,
         map: map,
         url: '/cocohouse/location/CH_location_en.html',
         icon: "/images/ariranglogoimage28_2.png",
         title: 'Coco House',
     });
     markers[1] = new google.maps.Marker({
         position: myLatLng1,
         map: map,
         icon: "/images/cocohouse/location/train26.png",
         url:"/cocohouse/location/to_CH3_en.html",
         title: 'Train Terminal',

     });
     markers[2] = new google.maps.Marker({
         position: myLatLng2,
         map: map,
         icon: "/images/cocohouse/location/airport32.png",
         url:"/cocohouse/location/to_CH1_en.html",
         title: 'Airport',
     });
     markers[3] = new google.maps.Marker({
         position: myLatLng3,
         map: map,
         icon: "/images/cocohouse/location/bus26.png",
         url:"/cocohouse/location/to_CH2_en.html",
         title: 'Bus Terminal',
     });

     for ( i = 0; i < markers.length; i++ ) {
        google.maps.event.addListener(markers[i], 'click', function() {
          window.location.href = this.url; 
        });
     }
    }
    google.maps.event.addDomListener(window, 'load', Goog2);

</script>

user1210329 06 янв '15 в 00:07 2015-01-06 00:07 · Answer 3 · 2015-01-06 00:07

Вы добавляете прослушиватели кликов до того, как маркеры существуют. Переместите эту петлю внутрь Goog2 функция. Пример фрагмента кода (поменял маркеры на общедоступные значки, URL-адреса на произвольные общедоступные, исправил орфографическую ошибку на markers.length).

 function Goog2() {
   var mapCanvas = document.getElementById('Google_map');
   var mapOptions = {
     center: new google.maps.LatLng(45.80257, 15.9371),
     zoom: 10,
     mapTypeId: google.maps.MapTypeId.ROADMAP
   }
   var map = new google.maps.Map(mapCanvas, mapOptions);

   var myLatLng0 = new google.maps.LatLng(45.80257, 15.9371);
   var myLatLng1 = new google.maps.LatLng(45.805455, 15.983761);
   var myLatLng2 = new google.maps.LatLng(45.738822, 16.068278);
   var myLatLng3 = new google.maps.LatLng(45.803816, 15.993573);

   var markers = [];


   markers[0] = new google.maps.Marker({
     position: myLatLng0,
     map: map,
     url: 'http://google.com',
     icon: "http://maps.google.com/mapfiles/ms/micons/yellow.png",
     title: 'Coco House',
   });
   markers[1] = new google.maps.Marker({
     position: myLatLng1,
     map: map,
     icon: "http://maps.google.com/mapfiles/ms/micons/blue.png",
     url: "http://yahoo.com",
     title: 'Train Terminal',

   });
   markers[2] = new google.maps.Marker({
     position: myLatLng2,
     map: map,
     icon: "http://maps.google.com/mapfiles/ms/micons/green.png",
     url: "http://maps.google.com",
     title: 'Airport',
   });
   markers[3] = new google.maps.Marker({
     position: myLatLng3,
     map: map,
     icon: "http://maps.google.com/mapfiles/ms/micons/purple.png",
     url: "http://www.cnn.com",
     title: 'Bus Terminal',
   });

   for (i = 0; i < markers.length; i++) {
     google.maps.event.addListener(markers[i], 'click', function() {
       window.location.href = this.url;
     });
   }
 }
 google.maps.event.addDomListener(window, 'load', Goog2);

html,
body,
#Google_map {
  height: 500px;
  width: 500px;
  margin: 0px;
  padding: 0px
}

<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="Google_map" style="width:750px; height:450px; border: 2px solid #3872ac;"></div>