한 페이지에 여러 구글지도보기

Question

hpneo gmaps 플러그인을 사용하여

메신저 : http://hpneo.github.io/gmaps/

그리고 난 지금이 ​​코드를 가지고 있지만, 그것은 첫 번째지도를 보여주고, 다른 위치로 여러 맵을 사용할

/* Google map */ 
var map1; 
    $(document).ready(function(){ 
     prettyPrint(); 
     map1 = new GMaps({ 
     div: '#map', 
     scrollwheel: false, 
     lat: 54.7181780, 
     lng: 25.2204530, 
     zoom: 16 
     }); 

map1.addMarker({ 
     lat: 54.7181780, 
     lng: 25.2204530, 
     title: 'II "Meistrus" ', 
     icon: '/images/marker.png' 

     }); 
}); 

/* Vilnius */ 
var map2; 
    $(document).ready(function(){ 
     prettyPrint(); 
     map2 = new GMaps({ 
     div: '#vilnius', 
     scrollwheel: false, 
     lat: 54.8900070, 
     lng: 23.9255120, 
     zoom: 10 
     }); 

map2.addMarker({ 
     lat: 54.8900070, 
     lng: 23.9255120, 
     title: 'II "Meistrus" ', 
     icon: '/images/marker.png' 

     }); 
}); 

여기에 바이올린 코드가 있습니다 : http://jsfiddle.net/337T7/ - 잘 작동하지만 "vilnius"지도 만 표시하고 <div id="map" class="map"></div>을 제거하지 않으면 아무지도도 표시되지 않습니다.

무엇이 잘못 되었나요?

Answer 1

div가 없으므로 첫 번째 호출에서 오류가 발생하여 나머지 호출이 취소됩니다. 사업부가있는 경우에는 검사 할 수 있습니다 : http://jsfiddle.net/337T7/1/

/* Google map */ 
var map1; 
$(document).ready(function(){ 
    if ($('#map').length) { 
     prettyPrint(); 
     map1 = new GMaps({ 
      div: '#map', 
      scrollwheel: false, 
      lat: 54.7181780, 
      lng: 25.2204530, 
      zoom: 16 
     }); 

     map1.addMarker({ 
      lat: 54.7181780, 
      lng: 25.2204530, 
      title: 'II "Meistrus" ', 
      icon: 'http://silk.webmode.lt/wp-content/themes/silk_theme/images/marker.png' 

     }); 
    } 
}); 

/* Vilnius */ 
var map2; 
$(document).ready(function(){ 
    if ($('#vilnius').length) { 
     prettyPrint(); 
     map2 = new GMaps({ 
     div: '#vilnius', 
     scrollwheel: false, 
     lat: 54.8900070, 
     lng: 23.9255120, 
     zoom: 10 
     }); 

    map2.addMarker({ 
     lat: 54.8900070, 
     lng: 23.9255120, 
     title: 'II "Meistrus" ', 
     icon: 'http://silk.webmode.lt/wp-content/themes/silk_theme/images/marker.png' 

     }); 
    } 
}); 

Answer 2

당신이 그것에 함수를 호출하기 전에 당신은 사업부가 존재하는지 여부를 확인해야한다. 이렇게하는 가장 간단한 방법은 또한

if(document.getElementById('map)){ 
    //your code 
} 

내에서 코드를 배치하여, 나는

그래서 결과 코드는 것 하나 document.ready에 코드의 두 덩어리를 넣어 좋은 방법이 될 것이라고 생각 이렇게 될 것을 : 내가 사업부가 다른 방법으로 HTML 실제로없는 경우는 실행 된지도 중 하나와 관련된 코드가없는 더 우아한 것 생각

var map1, map2; 
$(document).ready(function(){ 
    prettyPrint(); 
    if(document.getElementById('map')){ 
    map1 = new GMaps({ 
     div: '#map', 
     scrollwheel: false, 
     lat: 54.7181780, 
     lng: 25.2204530, 
     zoom: 16 
    }); 
    map1.addMarker({ 
     lat: 54.7181780, 
     lng: 25.2204530, 
     title: 'II "Meistrus" ', 
     icon: '/images/marker.png' 
    }); 
    } 

    if(document.getElementById('vilnius')){ 
    prettyPrint(); 
    map2 = new GMaps({ 
     div: '#vilnius', 
     scrollwheel: false, 
     lat: 54.8900070, 
     lng: 23.9255120, 
     zoom: 10 
    }); 
    map2.addMarker({ 
     lat: 54.8900070, 
     lng: 23.9255120, 
     title: 'II "Meistrus" ', 
     icon: '/images/marker.png' 
    }); 
    } 
}); 

이상으로 DIV 경우 테스트 만약 거기에. 그러나 프로젝트의 구조가 어떻게되는지는 알지 못합니다.