Несколько карт на одной странице - ColdFusion

Question

Застрять на Google Maps

Использование ColdFusion - Я заселение список Арены ... я хочу выпадающий из карты, если у них есть один - и ссылку, чтобы добавить карта. Ссылки, чтобы заполнить карту и отметить ее работу.

Когда у меня есть несколько записей - я не получаю несколько карт - получаю только отображение последнего результата.

Я пробовал другое кодирование, которое я использовал в прошлом, но все равно не повезло с несколькими картами - поэтому, начиная с этого более легкого вида javascript.

Любая помощь приветствуется. Удаление старого кода - идти к тому, что в настоящее время работает - просто не показывать маркеры

<img src="../images/gps1.png" height=25 border=0 alt="Show Map" onclick="javascript:showElement('g#aid#')"> 

Кроме того - когда я использую стиль = «дисплей: нет;» с помощью Google Карты Div:

<div id="g#aid#" style="width: 600px; height: 300px;" style="display:none;"></div> 

выпадающая карта искажена и не центрирована. Без него - он закрывается и открывается просто отлично, но всегда остается открытым.

Как было предложено - вот выход Javascript ... Здесь выводится ниже 2 результатов ... Только последняя карта показывает ..

Ниже некоторый прогресс - начиная с Google API - это где я «м в ...

Существует тело OnLoad, чтобы сделать эту работу ...

Все карты показывают правильно ... даже добавил еще ... Просто не получает маркеры ... I попробовали код Google Marker ... Не повезло ... Так что просто собираюсь код, который правильно отображает карты. .

Просто нужно понять маркер карты из ...

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script> 

    <cfoutput query=arena"> 


    <script> 
    var map; 
    function initialize() { 
    var mapOptions = { 
     zoom: 13, 
     center: new google.maps.LatLng(#arena.agpslat#,#arena.agpslong#), 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    }; 
    map = new google.maps.Map(document.getElementById('g#arena.aid#'), 
     mapOptions); 

    } 

    google.maps.event.addDomListener(window, 'load', initialize); 
    </script> 

    <div id="g#arena.aid#" style="width: 600px; height: 300px;"></div> 

    </cfoutput> 

Добавление этого: Не поймите меня маркер ...

var marker = new google.maps.Marker({ 
     position: myLatlng, 
     map: map, 
     title: '#arena.arename#' 
    }); 

Answer 1

Проблема вы звоните в JS файл и определение идентично названной функции в вашем цикле запросов. Вам нужно переместить этот материал из цикла запросов, чтобы вы только вызывали файл и создавали функцию один раз.

Таким образом, вместо того, чтобы каждый раз, когда он был в вашей петле, была инициализирована функция инициализации, переместите это из цикла. И вместо этого есть вызов этой функции из цикла, передавая в нее разные значения lat/lng, идентификаторы div и имена.

Избавьтесь от существующих вызовов функций инициализации из тега body и просто используйте прослушиватели событий Google, когда загружается окно, каждый раз передавая разные параметры initialize.

Что-то вроде следующего:

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

<script> 
    var arenas = []; // array of arenas, to be populated later within the query loop 
    function initialize() { 
    var intArena, myLatlng, mapOptions, map, marker; 

    // loop over all the arenas, creating maps and markers for each 
    for (intArena = 0; intArena < arenas.length; intArena++) { 
     myLatlng = new google.maps.LatLng(arenas[intArena].lat, arenas[intArena].lng); 
     mapOptions = { 
     zoom: 11, 
     center: myLatlng, 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
     } 
     map = new google.maps.Map(document.getElementById(arenas[intArena].id), mapOptions); 

     marker = new google.maps.Marker({ 
      position: myLatlng, 
      map: map, 
      title: arenas[intArena].name 
     }); 
    } 
    } 

    google.maps.event.addDomListener(window, 'load', initialize); 
</script> 

<cfoutput query="arena"> 
    <cfif arena.agpslat is not "" and arena.agpslong is not ""> 
    <script> 
     // add struct of arena data to the array for use later on in the initialize function 
     arenas.push({ 
     lat: #arena.agpslat#, 
     lng: #arena.agpslong#, 
     id: 'g#arena.aid#', 
     name: '#JsStringFormat(arena.arenaname)#' 
     }); 
    </script> 

    <div id="g#arena.aid#" style="width: 600px; height: 300px;"></div> 
    </cfif> 

    <div align=center>g#arena.aid#<br><b>[ <a href="arenagps.cfm?aid=#arena.aid#"><font color=cc3300>Change/Add Using Map Function</font></a> ]</b><br></div> 
</cfoutput> 

Также обратите внимание, что я приставкой ссылки на столбцах запроса с именем запроса. Это почти всегда хорошая идея, чтобы правильно охватить все ваши переменные.

Answer 2

Got ... Thx для предложений все ...

Потребности

<body onload="initialize()"> 

ColdFusion Coding - использовали переменную переименовать функцию и mapoption - поэтому они всегда разные.

<cfoutput query=arena> 

    <cfif arena.agpslat is not "" and arena.agpslong is not ""> 

    <script type="text/javascript"> 
function initialize() { 
    var #arena.aid#Latlng = new google.maps.LatLng(#arena.agpslat#,#arena.agpslong#); 

    var #arena.aid#Options = { 
     zoom: 15, 
     center: #arena.aid#Latlng, 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    }; 

    var map = new google.maps.Map(document.getElementById("g#arena.aid#"), #arena.aid#Options); 

    var marker = new google.maps.Marker({ 
     position: #arena.aid#Latlng, 
     map: map, 
     title: '#arena.arenaname#' 
     }); 

} 

google.maps.event.addDomListener(window, 'load', initialize); 
    </script> 

    <div id="g#arena.aid#" style="width: 600px; height: 300px;"></div> 



    <div align=center>g#arena.aid#<br><b>[ <a href="arenagps.cfm?aid=#arena.aid#"><font color=cc3300>Change/Add Using Map Function</font></a> ]</b><br></div> 

    </cfif> 

</cfoutput>