Skip to content

Commit e046159

Browse files
auserauser
committed
Updated removing markers
1 parent d0b7b66 commit e046159

File tree

6 files changed

+115
-62
lines changed

6 files changed

+115
-62
lines changed

‎dist/components/Marker.js

+10-5
Original file line numberDiff line numberDiff line change
@@ -122,16 +122,21 @@
122122
value: function componentDidUpdate(prevProps) {
123123
var _this2 = this;
124124

125-
if (this.props.map !== prevProps.map || this.props.position !== prevProps.position) {
125+
console.log('yay from here ->', this.props.position !== prevProps.position, this.props.map !== prevProps.map);
126+
127+
// if (this.props.map !== prevProps.map || this.props.position !== prevProps.position) {
126128
var _props = this.props;
127129
var map = _props.map;
128130
var google = _props.google;
129131
var position = _props.position;
130132
var mapCenter = _props.mapCenter;
131133

132-
133134
var pos = position || mapCenter;
134-
position = new google.maps.LatLng(pos.lat, pos.lng);
135+
136+
if (!position.instanceof(google.maps.LatLng))
137+
position = new google.maps.LatLng(pos.lat, pos.lng);
138+
139+
console.log('yay from here ->', position);
135140

136141
var pref = {
137142
map: map,
@@ -142,7 +147,7 @@
142147
evtNames.forEach(function (e) {
143148
_this2.marker.addListener(e, _this2.handleEvent(e));
144149
});
145-
}
150+
// }
146151
}
147152
}, {
148153
key: 'handleEvent',
@@ -180,4 +185,4 @@
180185
};
181186

182187
exports.default = Marker;
183-
});
188+
});

‎dist/index.js

+22-5
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,34 @@
11
(function (global, factory) {
22
if (typeof define === "function" && define.amd) {
3-
define(['module', 'exports', '/Users/auser/Development/fullstack/GoogleMapComponent/node_modules/redbox-react/lib/index.js', '/Users/auser/Development/fullstack/GoogleMapComponent/node_modules/react-transform-catch-errors/lib/index.js', 'react', '/Users/auser/Development/fullstack/GoogleMapComponent/node_modules/react-transform-hmr/lib/index.js', 'react-dom', './lib/String'], factory);
3+
define(['module', 'exports', './GoogleApiComponent', './components/Marker', '/Users/auser/Development/fullstack/GoogleMapComponent/node_modules/redbox-react/lib/index.js', '/Users/auser/Development/fullstack/GoogleMapComponent/node_modules/react-transform-catch-errors/lib/index.js', 'react', '/Users/auser/Development/fullstack/GoogleMapComponent/node_modules/react-transform-hmr/lib/index.js', 'react-dom', './lib/String'], factory);
44
} else if (typeof exports !== "undefined") {
5-
factory(module, exports, require('/Users/auser/Development/fullstack/GoogleMapComponent/node_modules/redbox-react/lib/index.js'), require('/Users/auser/Development/fullstack/GoogleMapComponent/node_modules/react-transform-catch-errors/lib/index.js'), require('react'), require('/Users/auser/Development/fullstack/GoogleMapComponent/node_modules/react-transform-hmr/lib/index.js'), require('react-dom'), require('./lib/String'));
5+
factory(module, exports, require('./GoogleApiComponent'), require('./components/Marker'), require('/Users/auser/Development/fullstack/GoogleMapComponent/node_modules/redbox-react/lib/index.js'), require('/Users/auser/Development/fullstack/GoogleMapComponent/node_modules/react-transform-catch-errors/lib/index.js'), require('react'), require('/Users/auser/Development/fullstack/GoogleMapComponent/node_modules/react-transform-hmr/lib/index.js'), require('react-dom'), require('./lib/String'));
66
} else {
77
var mod = {
88
exports: {}
99
};
10-
factory(mod, mod.exports, global.index, global.index, global.react, global.index, global.reactDom, global.String);
10+
factory(mod, mod.exports, global.GoogleApiComponent, global.Marker, global.index, global.index, global.react, global.index, global.reactDom, global.String);
1111
global.index = mod.exports;
1212
}
13-
})(this, function (module, exports, _index, _index3, _react2, _index5, _reactDom, _String) {
13+
})(this, function (module, exports, _GoogleApiComponent, _Marker, _index, _index3, _react2, _index5, _reactDom, _String) {
1414
'use strict';
1515

1616
Object.defineProperty(exports, "__esModule", {
1717
value: true
1818
});
19+
exports.Map = exports.Marker = exports.GoogleApiWrapper = undefined;
20+
Object.defineProperty(exports, 'GoogleApiWrapper', {
21+
enumerable: true,
22+
get: function () {
23+
return _GoogleApiComponent.wrapper;
24+
}
25+
});
26+
Object.defineProperty(exports, 'Marker', {
27+
enumerable: true,
28+
get: function () {
29+
return _Marker.Marker;
30+
}
31+
});
1932

2033
var _index2 = _interopRequireDefault(_index);
2134

@@ -118,7 +131,7 @@
118131

119132
var evtNames = ['click', 'dragend'];
120133

121-
var Map = _wrapComponent('Map')(function (_React$Component) {
134+
var Map = exports.Map = _wrapComponent('Map')(function (_React$Component) {
122135
_inherits(Map, _React$Component);
123136

124137
function Map(props) {
@@ -187,6 +200,10 @@
187200
evtNames.forEach(function (e) {
188201
_this3.map.addListener(e, _this3.handleEvent(e));
189202
});
203+
204+
if (this.props.onReady) {
205+
this.props.onReady(this.map);
206+
}
190207
}
191208
}
192209
}, {

‎examples/basic.js

+3-3
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
import React from 'react'
22
import ReactDOM from 'react-dom'
33

4-
import GoogleApiComponent from '../src/GoogleApiComponent'
5-
import Map from '../src/index'
4+
// import GoogleApiComponent from '../src/GoogleApiComponent'
5+
import Map, {GoogleApiWrapper} from '../src/index'
66
import Marker from '../src/components/Marker'
77
import InfoWindow from '../src/components/InfoWindow'
88

@@ -97,7 +97,7 @@ const Container = React.createClass({
9797
}
9898
});
9999

100-
const Wrapped = GoogleApiComponent({
100+
const Wrapped = GoogleApiWrapper({
101101
apiKey: __GAPI_KEY__
102102
})(Container)
103103

‎src/components/InfoWindow.js

+18-10
Original file line numberDiff line numberDiff line change
@@ -4,18 +4,13 @@ import ReactDOMServer from 'react-dom/server'
44

55
export class InfoWindow extends React.Component {
66

7+
componentDidMount() {
8+
this.renderInfoWindow();
9+
}
10+
711
componentDidUpdate(prevProps) {
812
if (this.props.map !== prevProps.map) {
9-
let {map, google, mapCenter} = this.props;
10-
11-
const iw = this.infowindow = new google.maps.InfoWindow({
12-
content: ''
13-
});
14-
15-
google.maps.event
16-
.addListener(iw, 'closeclick', this.onClose.bind(this))
17-
google.maps.event
18-
.addListener(iw, 'domready', this.onOpen.bind(this));
13+
this.renderInfoWindow();
1914
}
2015

2116
if (this.props.children !== prevProps.children) {
@@ -30,6 +25,19 @@ export class InfoWindow extends React.Component {
3025
}
3126
}
3227

28+
renderInfoWindow() {
29+
let {map, google, mapCenter} = this.props;
30+
31+
const iw = this.infowindow = new google.maps.InfoWindow({
32+
content: ''
33+
});
34+
35+
google.maps.event
36+
.addListener(iw, 'closeclick', this.onClose.bind(this))
37+
google.maps.event
38+
.addListener(iw, 'domready', this.onOpen.bind(this));
39+
}
40+
3341
onOpen() {
3442
if (this.props.onOpen) {
3543
this.props.onOpen();

‎src/components/Marker.js

+34-16
Original file line numberDiff line numberDiff line change
@@ -5,26 +5,44 @@ const evtNames = ['click', 'mouseover'];
55

66
export class Marker extends React.Component {
77

8+
componentDidMount() {
9+
this.renderMarker();
10+
}
11+
812
componentDidUpdate(prevProps) {
913
if ((this.props.map !== prevProps.map) ||
1014
(this.props.position !== prevProps.position)) {
11-
let {
12-
map, google, position, mapCenter
13-
} = this.props;
14-
15-
let pos = position || mapCenter;
16-
position = new google.maps.LatLng(pos.lat, pos.lng);
17-
18-
const pref = {
19-
map: map,
20-
position: position
21-
};
22-
this.marker = new google.maps.Marker(pref);
23-
24-
evtNames.forEach(e => {
25-
this.marker.addListener(e, this.handleEvent(e));
26-
})
15+
this.renderMarker();
16+
}
17+
}
18+
19+
componentWillUnmount() {
20+
if (this.marker) {
21+
this.marker.setMap(null);
22+
}
23+
}
24+
25+
renderMarker() {
26+
let {
27+
map, google, position, mapCenter
28+
} = this.props;
29+
30+
let pos = position || mapCenter;
31+
if (!(pos instanceof google.maps.LatLng)) {
32+
position = new google.maps.LatLng(pos.lat, pos.lng);
2733
}
34+
35+
const pref = {
36+
map: map,
37+
position: position
38+
};
39+
this.marker = new google.maps.Marker(pref);
40+
41+
console.log('marker ->', this.marker);
42+
43+
evtNames.forEach(e => {
44+
this.marker.addListener(e, this.handleEvent(e));
45+
})
2846
}
2947

3048
handleEvent(evt) {

‎src/index.js

+28-23
Original file line numberDiff line numberDiff line change
@@ -11,9 +11,12 @@ const mapStyles = {
1111
}
1212
}
1313

14-
const evtNames = ['click', 'dragend'];
14+
const evtNames = ['ready', 'click', 'dragend', 'recenter'];
1515

16-
class Map extends React.Component {
16+
export {wrapper as GoogleApiWrapper} from './GoogleApiComponent'
17+
export {Marker} from './components/Marker'
18+
19+
export class Map extends React.Component {
1720
constructor(props) {
1821
super(props)
1922

@@ -43,32 +46,33 @@ class Map extends React.Component {
4346
}
4447

4548
componentDidUpdate(prevProps, prevState) {
46-
if (prevProps.google !== this.props.google) {
47-
this.loadMap();
48-
}
49-
if (prevState.currentLocation !== this.state.currentLocation) {
50-
this.recenterMap();
51-
}
49+
if (prevProps.google !== this.props.google) {
50+
this.loadMap();
51+
}
52+
if (prevState.currentLocation !== this.state.currentLocation) {
53+
this.recenterMap();
54+
}
5255
}
5356

5457
loadMap() {
55-
if (this.props && this.props.google) {
56-
const {google} = this.props;
57-
const maps = google.maps;
58+
if (this.props && this.props.google) {
59+
const {google} = this.props;
60+
const maps = google.maps;
5861

59-
const mapRef = this.refs.map;
60-
const node = ReactDOM.findDOMNode(mapRef);
61-
const curr = this.state.currentLocation;
62-
let center = new maps.LatLng(curr.lat, curr.lng)
62+
const mapRef = this.refs.map;
63+
const node = ReactDOM.findDOMNode(mapRef);
64+
const curr = this.state.currentLocation;
65+
let center = new maps.LatLng(curr.lat, curr.lng)
6366

64-
let mapConfig = Object.assign({}, {center, zoom: this.props.zoom})
67+
let mapConfig = Object.assign({}, {center, zoom: this.props.zoom})
6568

66-
this.map = new maps.Map(node, mapConfig);
69+
this.map = new maps.Map(node, mapConfig);
6770

68-
evtNames.forEach(e => {
69-
this.map.addListener(e, this.handleEvent(e));
70-
});
71-
}
71+
evtNames.forEach(e => {
72+
this.map.addListener(e, this.handleEvent(e));
73+
});
74+
maps.event.trigger(this.map, 'ready')
75+
}
7276
}
7377

7478
handleEvent(evtName) {
@@ -96,8 +100,9 @@ class Map extends React.Component {
96100
const maps = google.maps;
97101

98102
if (map) {
99-
let center = new maps.LatLng(curr.lat, curr.lng)
100-
map.panTo(center)
103+
let center = new maps.LatLng(curr.lat, curr.lng)
104+
map.panTo(center)
105+
maps.event.trigger(map, 'recenter')
101106
}
102107
}
103108

0 commit comments

Comments
 (0)