Контент метки google maps
Метки создаются и между ними переход осуществляется нормально, но не показывается контент при нажатии на метку.
Как это правильно сделать? <script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script> <script type="text/javascript"> var geocoder; var map; var query = new Array( 'Челябинск, ул. Богдана-хмельницкого, д. 27', 'Челябинск, ул. Кирова, д. 86', 'Челябинск, ул. Кирова, д. 112'); var idArr = new Array("mp0", "mp1", "mp2"); var arrContent = new Array( '<div class="info__phone">+7 (351) 777-11-50</div><div class="info__address">Челябинск, ул. Богдана-хмельницкого, д. 27 <br> info@test.ru</div>', '<div class="info__phone">+7 (351) 777-11-50</div><div class="info__address">Челябинск, ул. Кирова, д. 86 <br> info@test.ru</div>', '<div class="info__phone">+7 (351) 777-11-50</div><div class="info__address">Челябинск, ул. Кирова, д. 112 <br> info@test.ru</div>' ); function initialize() { geocoder = new google.maps.Geocoder(); var mapOptions = { zoom: 15, sensor:'true', disableDefaultUI:true, scrollwheel:false, styles:[ {"stylers":[ {"saturation":-100}, {"gamma":1} ]}, {"elementType":"labels.text.stroke", "stylers":[ {"visibility":"off"} ]}, {"featureType":"poi.business", "elementType":"labels.text", "stylers":[ {"visibility":"off"} ]}, {"featureType":"poi.business", "elementType":"labels.icon", "stylers":[ {"visibility":"off"} ]}, {"featureType":"poi.place_of_worship", "elementType":"labels.text", "stylers":[ {"visibility":"off"} ]}, {"featureType":"poi.place_of_worship", "elementType":"labels.icon", "stylers":[ {"visibility":"off"} ]}, {"featureType":"road", "elementType":"geometry", "stylers":[ {"visibility":"simplified"} ]}, {"featureType":"water", "stylers":[ {"visibility":"on"}, {"saturation":50}, {"gamma":0}, {"hue":"#50a5d1"} ]}, {"featureType":"administrative.neighborhood", "elementType":"labels.text.fill", "stylers":[ {"color":"#333333"} ]}, {"featureType":"road.local", "elementType":"labels.text", "stylers":[ {"weight":0.5}, {"color":"#333333"} ]}, {"featureType":"transit.station", "elementType":"labels.icon", "stylers":[ {"gamma":1}, {"saturation":50} ]} ] } map = new google.maps.Map(document.getElementById('canvas-map_1'), mapOptions); codeAddress(); this.zoomOut = function () { map.setZoom(map.getZoom() - 1) }; this.zoomIn = function () { map.setZoom(map.getZoom() + 1) }; } function codeAddress() { for (var key in query) { var address = query[key]; geocoder.geocode({ 'address': address }, function(k) { return function(results, status) { var image = 'http://png.findicons.com/files/icons/2266/rm_kute_toolbar_icons/60/identityblue.png'; if (status == google.maps.GeocoderStatus.OK) { var a = document.getElementById(idArr[k]); a.onclick = function() { map.setZoom(17); map.setCenter(results[0].geometry.location); } if(k==0){ map.setCenter(results[0].geometry.location); } var marker = new google.maps.Marker({ map: map, position: results[0].geometry.location, icon:image, content:arrContent[k] }); } else { console.log('Geocode was not successful for the following reason: ' + status); } } }(key) ); } } google.maps.event.addDomListener(window, 'load', initialize); </script> <section class="SectionMaps"> <div class="SectionMaps_wrap"> <div class="SectionMaps_wrap_title"> <ul class="SectionMaps_wrap_title_tabs"> <li class="SectionMaps_wrap_title_tabs_item" id="mp0"> Челябинск 1 </li> <li class="SectionMaps_wrap_title_tabs_item" id="mp1"> Челябинск 2 </li> <li class="SectionMaps_wrap_title_tabs_item" id="mp2"> Челябинск 3 </li> </ul> </div> </div> <div class="SectionMaps_map"> <div id="canvas-map_1"></div> </div> </section> <style> .SectionMaps_wrap_title_tabs_item{ height:50px; width:150px; display:inline-block; cursor:pointer; } #canvas-map_1{ height:300px; } </style> |
up
|
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script> <script type="text/javascript"> var geocoder; var map; var query = new Array( 'Челябинск, ул. Богдана-хмельницкого, д. 27', 'Челябинск, ул. Кирова, д. 86', 'Челябинск, ул. Кирова, д. 112'); var idArr = new Array("mp0", "mp1", "mp2"); var arrContent = new Array( '<div class="info__phone">+7 (351) 777-11-50</div><div class="info__address">Челябинск, ул. Богдана-хмельницкого, д. 27 <br> [email]info@test.ru[/email]</div>', '<div class="info__phone">+7 (351) 777-11-50</div><div class="info__address">Челябинск, ул. Кирова, д. 86 <br> [email]info@test.ru[/email]</div>', '<div class="info__phone">+7 (351) 777-11-50</div><div class="info__address">Челябинск, ул. Кирова, д. 112 <br> [email]info@test.ru[/email]</div>' ); function initialize() { geocoder = new google.maps.Geocoder(); var mapOptions = { zoom: 15, sensor:'true', disableDefaultUI:true, scrollwheel:false, styles:[ {"stylers":[ {"saturation":-100}, {"gamma":1} ]}, {"elementType":"labels.text.stroke", "stylers":[ {"visibility":"off"} ]}, {"featureType":"poi.business", "elementType":"labels.text", "stylers":[ {"visibility":"off"} ]}, {"featureType":"poi.business", "elementType":"labels.icon", "stylers":[ {"visibility":"off"} ]}, {"featureType":"poi.place_of_worship", "elementType":"labels.text", "stylers":[ {"visibility":"off"} ]}, {"featureType":"poi.place_of_worship", "elementType":"labels.icon", "stylers":[ {"visibility":"off"} ]}, {"featureType":"road", "elementType":"geometry", "stylers":[ {"visibility":"simplified"} ]}, {"featureType":"water", "stylers":[ {"visibility":"on"}, {"saturation":50}, {"gamma":0}, {"hue":"#50a5d1"} ]}, {"featureType":"administrative.neighborhood", "elementType":"labels.text.fill", "stylers":[ {"color":"#333333"} ]}, {"featureType":"road.local", "elementType":"labels.text", "stylers":[ {"weight":0.5}, {"color":"#333333"} ]}, {"featureType":"transit.station", "elementType":"labels.icon", "stylers":[ {"gamma":1}, {"saturation":50} ]} ] } map = new google.maps.Map(document.getElementById('canvas-map_1'), mapOptions); codeAddress(); this.zoomOut = function () { map.setZoom(map.getZoom() - 1) }; this.zoomIn = function () { map.setZoom(map.getZoom() + 1) }; } function codeAddress() { for (var key in query) { var address = query[key]; geocoder.geocode({ 'address': address }, function(k) { return function(results, status) { var image = 'http://png.findicons.com/files/icons/2266/rm_kute_toolbar_icons/60/identityblue.png'; if (status == google.maps.GeocoderStatus.OK) { var a = document.getElementById(idArr[k]); a.onclick = function() { map.setZoom(17); map.setCenter(results[0].geometry.location); } if(k==0){ map.setCenter(results[0].geometry.location); } var content = arrContent[k]; var contentWindow = new google.maps.InfoWindow({ content: content }); var marker = new google.maps.Marker({ map: map, position: results[0].geometry.location, icon:image }); google.maps.event.addListener(marker, 'click', function(){ contentWindow.open(map, marker); }); } else { console.log('Geocode was not successful for the following reason: ' + status); } } }(key) ); } } google.maps.event.addDomListener(window, 'load', initialize); </script> <section class="SectionMaps"> <div class="SectionMaps_wrap"> <div class="SectionMaps_wrap_title"> <ul class="SectionMaps_wrap_title_tabs"> <li class="SectionMaps_wrap_title_tabs_item" id="mp0"> Челябинск 1 </li> <li class="SectionMaps_wrap_title_tabs_item" id="mp1"> Челябинск 2 </li> <li class="SectionMaps_wrap_title_tabs_item" id="mp2"> Челябинск 3 </li> </ul> </div> </div> <div class="SectionMaps_map"> <div id="canvas-map_1"></div> </div> </section> <style> .SectionMaps_wrap_title_tabs_item{ height:50px; width:150px; display:inline-block; cursor:pointer; } #canvas-map_1{ height:300px; } </style> |
Суровый челябинский коп.
|
salexseen,:thanks:
[HTML run height=500] тут код [/HTML] |
Поправил, я думал что нужно использовать [JS][JS], так как js кода там больше чем html
|
Благодарю Вас!
salexseen и рони |
А где в апи гугла про эти окна с контентом написано?
И как вообще они правильно называются? |
psfdek,
это salexseen, спасибо, я сам только узнал об infowindows |
Блин, а как этому окну добавить класс?
|
Часовой пояс GMT +3, время: 12:38. |