I've created a custom map showing markers based on location data held in an array. Now I'm trying to apply Marker Manager as some of the markers are close together and could cause confusion or usability issues.I would really appreciate some help, I'm not sure why the markers are not showing up on the map, I may have the marker manager code in the wrong place.Full code below:\[code\](function() {var map, infowindow, marker;//Create an array literal to store the weather iconswindow.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 = http://stackoverflow.com/questions/14437772/{'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; //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.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.type+'Hover'; google.maps.event.addListener(marker, 'mouseover', function() { marker.setIcon(locationIcons[iconHover]) }); })(i, marker); (function(i, marker) { var newIcon = locationData.location.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.addressl2 == '') { p.innerHTML = '<strong>' +locationData.location.title +'</strong></br />' + locationData.location.addressl1 + '<br />' + locationData.location.city + '<br />' + locationData.location.pcode + '<br />' + '<br />' + locationData.location.tel; } else { p.innerHTML = '<strong>' +locationData.location.title +'</strong></br />' + locationData.location.addressl1 + '<br />' + locationData.location.addressl2 + '<br />' + locationData.location.city + '<br />' + locationData.location.pcode + '<br />' + '<br />' + locationData.location.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 ='http://stackoverflow.com/questions/14437772/#'; 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 = http://stackoverflow.com/questions/14437772/locationData.location.url; p2Spacing.innerHTML =' '; //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();\[/code\]}) ();
Applying Marker Manager for Google Maps V3
- Thread starter r4lph2
- Start date