0

配列に保持されている位置データに基づいてマーカーを表示するカスタム マップを作成しました。いくつかのマーカーが近くにあり、混乱や使いやすさの問題を引き起こす可能性があるため、Marker Manager を適用しようとしています。

マーカーがマップに表示されない理由がわかりません。マーカー マネージャーのコードが間違った場所にある可能性があります。

以下の完全なコード:

(function() {
var map, infowindow, marker;

//Create an array literal to store the weather icons
window.onload = function() {

    //Creating a map
    var options = {
        zoom:   2,
        center:     new google.maps.LatLng(25,25),
        mapTypeId:  google.maps.MapTypeId.ROADMAP
    };

     map = new google.maps.Map(document.getElementById('map'),options);

     var mgr = new MarkerManager(map);  

     var markers = [];        
     var locationIcons = [];

     //Add the factory icon
     locationIcons['factory'] = new google.maps.MarkerImage(
        'images/factory.png',
        new google.maps.Size(32.0, 37.0),
        null,
        new google.maps.Point(16.0, 18.0)
     );
     locationIcons['factoryHover'] = new google.maps.MarkerImage(
        'images/factory_over.png',
        new google.maps.Size(32.0, 37.0),
        null,
        new google.maps.Point(16.0, 18.0)
     );

     locationIcons['office'] = new google.maps.MarkerImage(
        'images/office.png',
        new google.maps.Size(32.0, 37.0),
        null,
        new google.maps.Point(16.0, 18.0)
     );
     locationIcons['officeHover'] = new google.maps.MarkerImage(
        'images/office_over.png',
        new google.maps.Size(32.0, 37.0),
        null,
        new google.maps.Point(16.0, 18.0)
     );     

     locationIcons['shadow'] = new google.maps.MarkerImage(
        'images/shadow.png',
        new google.maps.Size(51.0, 37.0),
        null,
        new google.maps.Point(16.0, 18.0)
     );           

     var locationData = {'location': [
     {
         'lat': 52.579924,
         'lng': -0.208772,
         'type': 'office',
         'title': 'xxxx',
         'addressl1': 'xxxx',
         'addressl2': '',
         'city': 'Peterborough',
         'pcode': 'PE1 5TP<br />United Kingdom',             
         'tel': 'xxxx',
         'url': 'www.abc.com'

     },
     {
         'lat': -25.522005,
         'lng': -49.31824,
         'type': 'factory',
         'title': 'xxxx',
         'addressl1': 'Rua Joao Chede, 2489 - CIC',
         'addressl2': '',
         'city': 'Curitiba',
         'pcode': '81170-220<br/>Brazil',            
         'tel': 'xxxx',
         'url': 'www.abc.com'    
     },
     {
         'lat': -23.630333,
         'lng': -46.70722,
         'type': 'office',
         'title': 'xxx',
         'addressl1': '',
         'addressl2': 'Rua Alexandre Dumas, 1711',
         'city': 'Sao Paulo',
         'pcode': '04717-004<br/>Brazil',            
         'tel': 'xxxx',
         'url': 'www.abc.com'    
     },
     {
         'lat': 31.520016,
         'lng': 120.455351,
         'type': 'factory',
         'title': 'xxx',
         'addressl1': '',
         'addressl2': 'Wuxi',
         'city': 'Jiangsu',
         'pcode': 'P.R. China',          
         'tel': 'xxx',
         'url': 'www.abc.com'    
     },
     {
         'lat': 31.212302,
         'lng': 121.420866,
         'type': 'office',
         'title': 'xxx',
         'addressl1': '',
         'addressl2': 'Room 2103, Le Shing International Plaza<br />1319 West Yan An Road',
         'city': 'Shanghai',
         'pcode': '200050<br />China',           
         'tel': 'xxx',
         'url': 'www.abc.com'    
     },  
     {
         'lat': 48.9821,
         'lng': 2.513187,
         'type': 'office',
         'title': 'xxx',
         'addressl1': '',
         'addressl2': 'Paris Nord II - Parc des Reflets<br />165 Avenue du Bois de la Pie',
         'city': 'Roissy CDG Cedex',
         'pcode': 'BP40064, F-95913<br/>France',             
         'tel': 'xxx',
         'url': 'www.abc.com'    
     },
     {
         'lat': 49.99406,
         'lng': 9.07277,
         'type': 'office',
         'title': 'xxx',
         'addressl1': '',
         'addressl2': 'Saalaeckerstrasse 4',
         'city': 'Kleinostheim',
         'pcode': 'D-63801<br />Germany',            
         'tel': 'xxx',
         'url': 'www.abc.com'    
     },
     {
         'lat': 35.67148,
         'lng': 139.721313,
         'type': 'office',
         'title': 'xxx',
         'addressl1': '',
         'addressl2': 'AIG Aoyama Building<br />2-11-16 Minami-Aoyama',
         'city': 'Minato-ku',
         'pcode': 'Tokyo, 107-0062<br/>Japan',           
         'tel': 'xxx',
         'url': 'www.abc.com'    
     },
     {
         'lat': 25.778658,
         'lng': -80.2969,
         'type': 'office',
         'title': 'xxx',
         'addressl1': '',
         'addressl2': '701 NW 62nd Ave # 200',
         'city': 'Miami',
         'pcode': 'FL 33126<br />USA',           
         'tel': 'xxx',
         'url': 'www.abc.com'    
     },  
     {
         'lat': 52.584728,
         'lng': -0.21727,
         'type': 'factory',
         'title': 'xxx',
         'addressl1': '',
         'addressl2': '',
         'city': 'Peterborough',
         'pcode': 'PE1 5FQ<br />United Kingdom',             
         'tel': 'xxxx',
         'url': 'www.abc.com'    
     }, 
     {
         'lat': 53.433981,
         'lng': -2.423279,
         'type': 'factory',
         'title': 'xxx',
         'addressl1': '',
         'addressl2': 'Northbank Industrial Park',
         'city': 'Irlam, Manchester',
         'pcode': 'M44 5PP<br />United Kingdom',             
         'tel': 'xxx',
         'url': 'www.abc.com'    
     },          
     {
         'lat': 33.230917,
         'lng': -84.224603,
         'type': 'factory',
         'title': 'xxx',
         'addressl1': '325 Green Valley Road',
         'addressl2': 'Griffin',
         'city': 'Georgia',
         'pcode': '30224<br />USA',          
         'tel': 'xxxx',
         'url': 'www.abc.com'    
     },              
     {
         'lat': 1.324992,
         'lng': 103.70777,
         'type': 'office',
         'title': 'xxx',
         'addressl1': '14 Tractor Road',
         'addressl2': '',
         'city': 'Singapore',
         'pcode': '627973',          
         'tel': 'xxx',
         'url': 'www.abc.com'    
     },
     {
         'lat': 1.297494,
         'lng': 103.631831,
         'type': 'factory',
         'title': 'xxx',
         'addressl1': '2 Tuas View Place #01-04M',
         'addressl2': '',
         'city': 'Singapore',
         'pcode': '637431',          
         'tel': 'xxx',
         'url': 'www.abc.com'    
     },
     {
         'lat': 40.837808,
         'lng': -89.554571,
         'type': 'office',
         'title': 'xxx',
         'addressl1': 'N4-AC6160',
         'addressl2': 'PO Box 610',
         'city': 'Mossville<br/>Illinois',
         'pcode': '61552-0610<br/>USA',          
         'tel': 'xxx',
         'url': 'www.abc.com'    
     }
     ]};

     for (var i = 0; i < locationData.location.length; i++) {
         //Create varaible to hold location data
        var locations = locationData.location[i];

        //Create marker
        marker = new google.maps.Marker({
            position: new google.maps.LatLng(locations.lat, locations.lng),
            map: map,
            shadow: locationIcons['shadow'],
            title: locations.title
        });         
        markers.push(marker);           
        //Store the type which relates to the icon required in a varaible
        var iconImage = locationData.location[i].type

        //Set the the normal icon image to the desired type
        marker.setIcon(locationIcons[iconImage]);

        //Extending the bounds object with each LatLng
        (function(i, marker) {
            var iconHover = locationData.location[i].type+'Hover';              

            google.maps.event.addListener(marker, 'mouseover', function() {
                marker.setIcon(locationIcons[iconHover])
            });
        })(i, marker);

        (function(i, marker) {
            var newIcon = locationData.location[i].type

            google.maps.event.addListener(marker, 'mouseout', function() {
                marker.setIcon(locationIcons[newIcon])
            });
        })(i, marker);

        (function(i, marker) {
            var center = new google.maps.LatLng(locations.lat, locations.lng);

            google.maps.event.addListener(marker, 'rightclick', function() {
                map.setCenter(center);
            });
        })(i, marker);

        (function(i, marker) {
            google.maps.event.addListener(marker, 'click', function() {

            if(!infowindow) {
                infowindow = new google.maps.InfoWindow();
            }

            //First we create the container for the content
            var content = document.createElement('div');
            var p = document.createElement('p');

            //We then create a paragraph element that will contain some text
            if(locationData.location[i].addressl2 == '') {
                p.innerHTML = '<strong>' +locationData.location[i].title +'</strong></br />' +
                locationData.location[i].addressl1 + '<br />' +
                locationData.location[i].city + '<br />' +
                locationData.location[i].pcode + '<br />' +
                '<br />' +
                locationData.location[i].tel;                   
            } else {
                p.innerHTML = '<strong>' +locationData.location[i].title +'</strong></br />' +
                locationData.location[i].addressl1 + '<br />' +
                locationData.location[i].addressl2 + '<br />' +
                locationData.location[i].city + '<br />' +
                locationData.location[i].pcode + '<br />' +
                '<br />' +
                locationData.location[i].tel;                   
            };                  

            //We then create a second paragraph element that will contain the link
            var p2 = document.createElement('p');
            var p2Spacing = document.createElement('p2');

            //Creating the clickable link for zooming in
            var zoom = document.createElement('a');
            zoom.innerHTML = 'Zoom in';
            zoom.href ='#';

            zoom.onclick = function() {
                map.setCenter(marker.getPosition());
                map.setZoom(18);
                return false;
            };

            //Creating the clickable link for the more detail's page
            var moreInfo = document.createElement('a');
            moreInfo.innerHTML = 'More Info';
            moreInfo.href = locationData.location[i].url;

            p2Spacing.innerHTML = '&nbsp;&nbsp;&nbsp;&nbsp;';

            //Appending the link to the second paragraph element
            p2.appendChild(zoom);
            p2.appendChild(p2Spacing);
            p2.appendChild(moreInfo);

            //Appending the two paragraphs to the content container
            content.appendChild(p);
            content.appendChild(p2);

            infowindow.setContent(content);

            //Opening the Infowindow
            infowindow.open(map, marker);
            });
        })(i, marker);
     }
     mgr.addMarkers(markers, 1);
}
mgr.refresh();
}) ();
4

0 に答える 0