1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
/**
 * Contempo Mapping
 *
 * @package WP Pro Real Estate 3
 * @subpackage JavaScript
 */

var estateMapping = (function () {
	var self = {},
	    marker_list = [],
	    open_info_window = null,
	    x_center_offset = 0, // x,y offset in px when map gets built with marker bounds
	    y_center_offset = -100,
	    x_info_offset = 0, // x,y offset in px when map pans to marker -- to accomodate infoBubble
	    y_info_offset = -100;
	
	function build_marker(latlng, property) {
	    var marker = new MarkerWithLabel({
			map: self.map, 
			draggable: false,
			flat: true,
			labelContent: property.price,
			labelAnchor: new google.maps.Point(22, 0),
			labelClass: "label", // the CSS class for the label
			labelStyle: {opacity: 1},
			icon: 'wp-content/themes/realestate_3/images/blank.png',   
			position: latlng
			});
		
		    self.bounds.extend(latlng);
			self.map.fitBounds(self.bounds);
            self.map.setCenter(convert_offset(self.bounds.getCenter(), x_center_offset, y_center_offset));

			var infoBubble = new InfoBubble({
				maxWidth: 275,
				content: contentString,
				borderRadius: 3,
				disableAutoPan: true
			});
			
			var residentialString = '';
			if(property['commercial'] != 'commercial') {
				var residentialString='<p class="details">'+property.bed+' br, '+property.bath+' ba';
			}

			var contentString =
			'<div class="info-content">'+
			'<a href="'+property.permalink+'"><img class="left" src="'+property.thumb+'" /></a>'+
			'<div class="listing-details left">'+
			'<h3><a href="'+property.permalink+'">'+property.street+'</a></h3>'+
			'<p class="location">'+property.city+', '+property.state+'&nbsp;'+property.zip+'</p>'+
			'<p class="price"><strong>'+property.fullPrice+'</strong></p>'+residentialString+', '+property.size+'</p></div>'+
			'</div>';

			var tabContent =
			'<div class="info-content">'+
			'<img class="left" src="'+property.agentThumb+'" />'+
			'<div class="listing-details left">'+
			'<h3>'+property.agentName+'</h3>'+
			'<p class="tagline">'+property.agentTagline+'</p>'+
			'<p class="phone"><strong>Tel:</strong> '+property.agentPhone+'</p>'+
			'<p class="email"><a href="mailto:'+property.agentEmail+'">'+property.agentEmail+'</a></p>'+
			'</div>'+
			'</div>';



			google.maps.event.addListener(marker, 'click', function() {
			    if(open_info_window) open_info_window.close();
			    
				if (!infoBubble.isOpen()) {
		            infoBubble.open(self.map, marker);
		            self.map.panTo(convert_offset(this.position, x_info_offset, y_info_offset));
		            open_info_window = infoBubble;
				}
			});
	}
	
    function geocode_and_place_marker(property) {
       var geocoder = new google.maps.Geocoder();
       var address = property.street+', '+property.city+' '+property.state+', '+property.zip;
           
           //If latlong exists build the marker, otherwise geocode then build the marker
           if (property['latlong']) {
               var lat = parseFloat(property['latlong'].split(',')[0]),
                    lng = parseFloat(property['latlong'].split(',')[1]);
                var latlng = new google.maps.LatLng(lat,lng);
                build_marker(latlng, property);
               
           } else {
               geocoder.geocode({ address : address }, function( results, status ) {
                   if(status == google.maps.GeocoderStatus.OK) {
        				var latlng = results[0].geometry.location;
        				build_marker(latlng, property);
        			}
        		});
            }
    }
    
    function init_canvas_projection() {
        function CanvasProjectionOverlay() {}
        CanvasProjectionOverlay.prototype = new google.maps.OverlayView();
        CanvasProjectionOverlay.prototype.constructor = CanvasProjectionOverlay;
        CanvasProjectionOverlay.prototype.onAdd = function(){};
        CanvasProjectionOverlay.prototype.draw = function(){};
        CanvasProjectionOverlay.prototype.onRemove = function(){};
        
        self.canvasProjectionOverlay = new CanvasProjectionOverlay();
        self.canvasProjectionOverlay.setMap(self.map);
    }
    
    function convert_offset(latlng, x_offset, y_offset) {
        var proj = self.canvasProjectionOverlay.getProjection();
        var point = proj.fromLatLngToContainerPixel(latlng);
        point.x = point.x + x_offset;
        point.y = point.y + y_offset;
        return proj.fromContainerPixelToLatLng(point);
    }
	
	self.init_property_map = function (properties, defaultmapcenter) {
    	var options = {
    		zoom: 1,
    		center: new google.maps.LatLng(defaultmapcenter.mapcenter),
    		mapTypeId: google.maps.MapTypeId.ROADMAP, 
    		disableDefaultUI: true,
			scrollwheel: false,
    		streetViewControl: false
    	};
        
    	self.map = new google.maps.Map( document.getElementById( 'map' ), options );
        self.bounds = new google.maps.LatLngBounds();
        init_canvas_projection();

        //wait for idle to give time to grab the projection (for calculating offset)
        var idle_listener = google.maps.event.addListener(self.map, 'idle', function() {
            for (i=0;i<properties.length;i++) {
                geocode_and_place_marker(properties[i]);
            }
            google.maps.event.removeListener(idle_listener);
        });
	
	}
	
	return self;
}());